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.

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij