HTML5 & CSS3

#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.

SASS i LESS

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;
  }
}
/* line 5, ../sass/if.scss */
body {
  background-image: url("/img/bl.png");
  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; }
}
/* 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');
  }
}
/* 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");
}

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;
}

Podsumowanie

Jeżeli uczciwie zapoznałeś się z informacjami w tej i w poprzednich częściach tego kursu to masz podstawy, które pozwalają rozpocząć Ci pracę z Compass i właśnie tym zajmować będziemy się w kolejnych częściach kursu.

Przydatne linki

Tagi:compasskurssass

komentarze 4

  • Awatar
    mercs600

    1 września 2013 16:53

    Świetne artykuły o SASS, wiesz może jakie są różnice pomiędzy SASS a SCSS oprócz tych składniowych ?

    Odpowiedz
    • Awatar
      Michał Załęcki

      1 września 2013 19:26

      Dzięki :) Nie ma innych różnic. No poza składnią, inne jest oczywiście rozszerzenie plików, które będą kompilowane. SASS to starsza składnia inspirowana Haml, a SCSS jest przedstawiane jako rozszerzenie CSS3, przy czym trzeba te stwierdzenie traktować z pewnym dystansem.

      Odpowiedz
      • Awatar
        mercs600

        1 września 2013 20:13

        W takim razie pytanie dot. różnic składniowych, czy różni się zapis deklaracji zmiennych, pętel itp, który opisujesz w swoich artykułach o SASS ?

        Odpowiedz
      • Awatar
        Michał Załęcki

        2 września 2013 10:06

        W SASS nie ma klamer i średników.

        Odpowiedz

Zostaw odpowiedź