W poprzednim artykule opisałem najważniejsze kwestie związane z używaniem SASS / SCSS. Opisane zostały zmienne, mixiny oraz dziedziczenie. Dzisiaj temat rozwinę o najbardziej zaawansowane możliwości tych preprocesorów. Jednak już na tym etapie muszę zaznaczyć otwarcie, że używanie warunków czy pętli nie jest rzeczą jaką front-endowiec potrzebuje na co dzień.

Modułowość SASS

Dzięki modułowości można stworzyć bardziej przejrzysty i zwięzły kod, a gotowe moduły można wykorzystywać wielokrotnie. Modułowość pozwala na stworzenie kolejnych plików, w których będą przechowywane mixiny, zmienne, a następnie używanie wewnątrz całego projektu bez potrzeby „wpadania” bez przerwy na ten podstawowy kod.

Tworzenie modułu: Nazwa pliku, który ma być wykorzystany powinna być poprzedzona dolnym podkreślnikiem, z kolei w pliku do którego importujemy należy użyć słowa kluczowego @import i nazwę pliku ze ścieżką (nazwa bez podkreślnika i bez rozszerzenia SCSS).

W celu zaimportowania plików: _variable.scss , _mixins.scss do pliku style.scss
we wnętrzu pliku style.scss wystarczy dodać zapis:

@import “variable”;
@import “mixins”;
//lub zapis równoważny:
@import “variable”, “mixins”;

Pętle w SASS

Do czego mogą przydać się pętle w preprocesorach? Najbardziej sensownym przykładem wykorzystania pętli jest stworzenie wielu podobnych styli np. klas. W przykładzie poniżej grupa elementów, które są kolejno wybierane metodą :nth-child(x), a następnie zmieniony jest kolor tła.

Sass - Lorem Ipsum

Pierwszą pętlą jest @for (fioletowe kolory na powyższym screenie). Wymaga ona podania zakresu from 1 through 5 i umożliwia operowanie indeksem #{$i} lub $i.

@for $i from 1 through 5 {
    #here>p:nth-child(#{$i}) {
        background-color: rgb(50*$i, 30*$i, 60*$i);
    }
}

Druga pętla @each (żółte kolory na powyższym screenie). Umożliwia ona iterację po tablicach, więc nie wymaga zakresu, ale tablicy. W poniższym przykładzie $list. Kolor tła zmieniany jest funkcją darken.

$list: 1,2,3,4,5;
@each $lst in $list {
    #here2>div:nth-child(#{$lst}) {
        background-color: darken(yellow, $lst * 5%);
    }
}

Trzecia pętla @while (czerwone kolory na powyższym screenie). Wymaga zadbania samemu o zmianę wartości licznika (tutaj $j). Kolor tła zmieniany jest funkcją lighten.

$j:1;
@while $j <=5 { #here3>p:nth-child(#{$j}) {
        background-color: lighten(red, $j * 5%);
        $j:$j+1;
    }
}

Warunki w SASS

Do czego mogą przydać się warunki w preprocesorach? Użycie warunków nie jest oczywiste, a nawet pojawiają się opinię wskazujące na ich bezużyteczność w SASS. Można jednak wyobrazić sobie sytuację, w której w ramach jednego pliku ta sama klasa zmienia się w zależności od deklaracji.

$text-color: red;
$bg-color: green;
$client: papol;
@if $client == papol {
    $text-color: white;
    $bg-color: black;
} @else if $client == some {
    $text-color: black;
    $bg-color: white;
}
#lead {
    color: $text-color;
    background-color: $bg-color;
}
  • Jeżeli wywołamy powyższy przykład np. korzystając z modułu, nadają zmiennej wartość: $client: papol kod wywoła się ustawiają kolor tekstu na biały, a tła na czarny.
  • Jeżeli jednak zmienna będzie miała wartość $client: some kod zostanie wywołany ustawiając kolor tekstu na czarny, a tło na biały.