#4 SASS + Compass: sterowanie przepływem

Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Jak nie trudno zauważyć SASS czerpie z języków programowania choć sam oczywiście nim nie jest, nie mniej jednak nie zabrakło instrukcji sterowania przepływem i właśnie na nich dzisiaj się skupię. Zgodnie z dokumentacją SASS instrukcje te nie zostały zaimplementowane po to by używać ich w „day-to-day styling”, a w funkcjach czy w wstawkach lub różnych bibliotekach by uczynić je bardziej elastycznymi. Nie wyklucza to oczywiście ich użycia w „zwykłym” kodzie, to jak zostaną wykorzystane zależy już od preferencji developera. Dzisiaj nie będę omawiał dokładnie działania instrukcji sterowania przepływem, zakładam, że ich idea i działanie jest już Ci znane z któregoś języka programowania, choćby JavaScript, PHP czy C, skupie się na ich konstrukcji.

Instrukcja warunkowa

Instrukcja warunkowa, jako jedna z najbardziej popularnych konstrukcji sterowania przepływem otwiera dzisiejsze zestawienie. Tutaj bez niespodzianek, ot taki prosty przykład.

$endable-baseline-bg: true;

$body-bg-color: navy; //ciemny niebieski (#000080)

body {
  @if $endable-baseline-bg { background-image: url('/img/bl.png'); }

  background-color: $body-bg-color;

  //lightness(color) zwraca jasność koloru w procentach
  @if lightness($body-bg-color) > 50%
  {
    //dla jasnego tła czarny kolor
    color: black;
  }
  @else
  {
    //dla ciemnego tła biały kolor
    color: white;
  }
}

$endable-baseline-bg: true;

$body-bg-color: navy; //ciemny niebieski (#000080)

body {

@if $endable-baseline-bg { background-image: url('/img/bl.png'); }

background-color: $body-bg-color;

//lightness(color) zwraca jasność koloru w procentach

@if lightness($body-bg-color) > 50%

{

//dla jasnego tła czarny kolor

color: black;

}

@else

{

//dla ciemnego tła biały kolor

color: white;

}

/* line 5, ../sass/if.scss */
body {
  background-image: url("/img/bl.png");
  background-color: navy;
  color: white;
}

/* line 5, ../sass/if.scss */

body {

background-color: navy;

color: white;

}

Można też łączyć konstrukcje instrukcje warunkowe w bloki else if, przykład z dokumentacji:

Pętla FOR

Trzeba przyznać, że pętla for wygląda w SASS dość oryginalnie. Jak na pętle for przystało musimy podać pierwszą i ostatnią wartość jakie przyjmie (bądź do której dojdzie) zmienna iteracyjna. W SASS mamy dwa typy pętli for. Ze słowem kluczowym through i to. W przypadku tego ostatniego zmienna iteracyjna nie osiąga ostatniej wartości.

@for $i from 0 through 2 {
  .mb-#{$i*10} { margin-bottom: 10px * $i; }
}

@for $i from 0 to 2 {
  .mt-#{$i*10} { margin-top: 10px * $i; }
}

@for $i from 0 through 2 {

.mb-#{$i*10} { margin-bottom: 10px * $i; }

}

@for $i from 0 to 2 {

.mt-#{$i*10} { margin-top: 10px * $i; }

}

/* line 2, ../sass/for.scss */
.mb-0 {
  margin-bottom: 0px;
}

/* line 2, ../sass/for.scss */
.mb-10 {
  margin-bottom: 10px;
}

/* line 2, ../sass/for.scss */
.mb-20 {
  margin-bottom: 20px;
}

/* line 6, ../sass/for.scss */
.mt-0 {
  margin-top: 0px;
}

/* line 6, ../sass/for.scss */
.mt-10 {
  margin-top: 10px;
}

/* line 2, ../sass/for.scss */

.mb-0 {

margin-bottom: 0px;

}

/* line 2, ../sass/for.scss */

.mb-10 {

margin-bottom: 10px;

}

/* line 2, ../sass/for.scss */

.mb-20 {

margin-bottom: 20px;

}

/* line 6, ../sass/for.scss */

.mt-0 {

margin-top: 0px;

}

/* line 6, ../sass/for.scss */

.mt-10 {

margin-top: 10px;

}

Pętla EACH

Pętla each działa na zbiorze elementów. Zbiór ten może zostać stworzony przed pętlą i przypisany zmiennej lub w samej pętli each.

@each $icon in facebook, gplus, twitter {
  .icon-#{$icon} {
    background-image: url('/img/icon/#{$icon}.png');
  }
}

$vehicles: (car, plane, bike);

@each $icon in $vehicles {
  .icon-#{$icon} {
    background-image: url('/img/icon/#{$icon}.png');
  }
}

@each $icon in facebook, gplus, twitter {

.icon-#{$icon} {

}

$vehicles: (car, plane, bike);

@each $icon in $vehicles {

.icon-#{$icon} {

}

/* line 2, ../sass/each.scss */
.icon-facebook {
  background-image: url("/img/icon/facebook.png");
}

/* line 2, ../sass/each.scss */
.icon-gplus {
  background-image: url("/img/icon/gplus.png");
}

/* line 2, ../sass/each.scss */
.icon-twitter {
  background-image: url("/img/icon/twitter.png");
}

/* line 10, ../sass/each.scss */
.icon-car {
  background-image: url("/img/icon/car.png");
}

/* line 10, ../sass/each.scss */
.icon-plane {
  background-image: url("/img/icon/plane.png");
}

/* line 10, ../sass/each.scss */
.icon-bike {
  background-image: url("/img/icon/bike.png");
}

/* line 2, ../sass/each.scss */

.icon-facebook {

}

/* line 2, ../sass/each.scss */

.icon-gplus {

}

/* line 2, ../sass/each.scss */

.icon-twitter {

}

/* line 10, ../sass/each.scss */

.icon-car {

}

/* line 10, ../sass/each.scss */

.icon-plane {

}

/* line 10, ../sass/each.scss */

.icon-bike {

}

Pętla WHILE

Pętla while będzie wykonywać się tak długo jak wyrażenie będzie zwracać prawdę. Konstrukcja ta zapewnia nam bardziej kompleksową kontrolę nad zmienną iteracyjną niż pętla for.

$i: 10;
@while $i >= 0 {
  .p-#{$i*10} { padding: 10px * $i; }
  $i: $i - 2;
}

/* line 3, ../sass/while.scss */
.p-100 {
  padding: 100px;
}

/* line 3, ../sass/while.scss */
.p-80 {
  padding: 80px;
}

/* line 3, ../sass/while.scss */
.p-60 {
  padding: 60px;
}

/* line 3, ../sass/while.scss */
.p-40 {
  padding: 40px;
}

/* line 3, ../sass/while.scss */
.p-20 {
  padding: 20px;
}

/* line 3, ../sass/while.scss */
.p-0 {
  padding: 0px;
}

$i: 10;

@while $i >= 0 {

.p-#{$i*10} { padding: 10px * $i; }

$i: $i - 2;

}