Sass (Syntactically Awesome Style Sheets), to potężny preprocesor CSS który ułatwia nam tworzenie niesamowitych styli dla nowoczesnych projektów stron internetowych. Usprawnia tworzenie czystych, łatwych w utrzymaniu, modularnych, i skalowalnych projektów.
Sass wśród licznych funkcji, jakie oferuje, pętle wyróżniają się jako szczególnie wartościowe. Pętle umożliwiają programistom pisanie czystszego, bardziej zrozumiałego kodu, automatyzując generowanie powtarzalnego fragmentu kodu. W niniejszym artykule przyjrzymy się szczegółowo pętlom, demonstrując, jak mogą one usprawnić pracę z CSS na twojej stronie internetowej.
Zrozumienie Pętli w Sass
Pętle w Sass/SCSS działają przede wszystkim tak jak w innych językach programowania, pozwalając na iterację po zestawie wartości lub elementów. Występują w dwóch głównych odmianach: pętle @for i pętle @each.
Pętla @for
Pętla @for jest przydatna, gdy musimy wygenerować kod z zakresu wartości liczbowych. Jej budowa, składnia jest podobna i powszechnienie znana w środowisku programistycznym z różnych innych języków i jej działanie jest niemal identyczne:
@for $zmienna from <początek_zakresu> through <koniec_zakresu> {
// ciało pętli
}
W powyższym kodzie $zmienna oznacza zmienną w pętli, która iteruje od wartości "początek_zakresu" do wartości "koniec_zakresu" włącznie z nim (<=), słowo kluczowe through.
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i;
}
}
Taka pętla wygeneruje nam reguły CSS dla trzech elementów:
.item-1 {
width: 100px;
}
.item-2 {
width: 200px;
}
.item-3 {
width: 300px;
}
Mamy również możliwość iteracji pętli do zakresu końcowego bez niego (<) przy wykorzystaniu konstrukcji jak poniżej, słowo kluczowe to.
@for $zmienna from <początek_zakresu> to <koniec_zakresu> {
// ciało pętli
}
Pętla @each
Z kolei pętla @each iteruje po listach lub mapach. Jej składnia również nawiązuje do wszystkich innych powszechnych języków programowania i wygląda następująco:
@each $zmienna in <lista> {
// ciało pętli
}
//Przykład:
$kolory: red, green, blue;
@each $kolor in $kolory {
.btn-#{$kolor} {
background-color: $kolor;
}
}
Ta pętla wygeneruje nam reguły CSS dla elementów .btn-[kolor] z różnymi kolorami tła jak poniżej:
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
.btn-blue {
background-color: blue;
}
Zaawansowane Techniki
Zagnieżdżanie Pętli
Kolejnym przykładem może być bardziej zaawansowana konstrukcja pętli polegająca na zagnieżdżaniu kilku pętli w jednej. Zastosowanych w nim zostało kilka rodzai pętli dodatkowe warunki sprawdzające oraz obiekt z niezbędnymi danymi.
Poniższy kod umożliwia nam wygenerowanie klas dla komponentów, będących pełną siatką/gridem wielowymiarowym, z uwzględnieniem wszystkich potrzebnych mediaqueries (zawartych w obiekcie). Jest to grid wielowymiarowy gdyż generuje nam nie tylko jeden podział na kolumny jak w popularnych bibliotekach na 12 czy 10 kolumn, tylko generuje nam z podanego zakresu podział na n kolumn.
$grid-breakpoints: (xs: 0, sm: 480, md: 768, lg: 1024, xl: 1200, max: 1600);
@each $grid_name, $grid_val in $grid-breakpoints {
@media only screen and (min-width: $grid_val + 'px') {
@for $x from 1 through 5 {
@for $y from 1 to $x + 1 {
@if $grid_name != xs {
.col-#{$grid_name}-#{$x}-#{$y} {
flex-basis: percentage(calc($y / $x));
}
} @else {
.col-#{$x}-#{$y} {
flex-basis: percentage(calc($y / $x));
}
}
}
}
}
}
Dzięki powyższemu przykładowi, w prosty sposób, praktycznie 3-linijkowy kod (nie licząc kolejnych 3 linijek dla pierwszego warunku dla klas base-mobile bez oznaczenia poziomu rozdzielczości) zamienia się w pełną n wymiarową siatkę, generując +/- 280 lini kodu. W zależności od warunku progowego z drugiej głównej pętli mamy podział na n kolumn z pełnym pokryciem. Łatwiej to będzie wyjaśnić fragmentami wygenerowanymi z powyższej pętli.
Zwiększając zakres przykładowo do 12 jak w popularnym Bootstrapie wygeneruje nam ponad 1400 lini kodu, oczywiści całość można jeszcze skompresować i dodać kolejne warunki unikające powtórzeń, ale przy próbie ręcznego pokrycia takiej siatki otrzymujemy oszczędność czasu, modularności i utrzymanie które, jest nieporównywalnym poziomie.
.col-1-1 {
flex-basis: 100%;
}
.col-2-1 {
flex-basis: 50%;
}
.col-2-2 {
flex-basis: 100%;
}
.col-3-1 {
flex-basis: 33.3333333333%;
}
.col-3-2 {
flex-basis: 66.6666666667%;
}
.col-3-3 {
flex-basis: 100%;
}
.col-4-1 {
flex-basis: 25%;
}
.col-4-2 {
flex-basis: 50%;
}
.col-4-3 {
flex-basis: 75%;
}
.col-4-4 {
flex-basis: 100%;
}
.col-5-1 {
flex-basis: 20%;
}
.col-5-2 {
flex-basis: 40%;
}
.col-5-3 {
flex-basis: 60%;
}
.col-5-4 {
flex-basis: 80%;
}
.col-5-5 {
flex-basis: 100%;
}
// …
@media only screen and (min-width: 1600px) {
.col-max-1-1 {
flex-basis: 100%;
}
.col-max-2-1 {
flex-basis: 50%;
}
.col-max-2-2 {
flex-basis: 100%;
}
.col-max-3-1 {
flex-basis: 33.3333333333%;
}
.col-max-3-2 {
flex-basis: 66.6666666667%;
}
.col-max-3-3 {
flex-basis: 100%;
}
//…
.col-max-5-1 {
flex-basis: 20%;
}
.col-max-5-2 {
flex-basis: 40%;
}
.col-max-5-3 {
flex-basis: 60%;
}
.col-max-5-4 {
flex-basis: 80%;
}
.col-max-5-5 {
flex-basis: 100%;
}
}
Dynamiczne Nazwy Właściwości
Możemy używać interpolacji Sass do generowania dynamicznych nazw właściwości:
$atrybuty: top, bottom, right, left;
@each $atr in $atrybuty {
.element {
#{$atr}: 100px;
}
}
// Co nam wygeneruje poniższy kod
.element {
top: 100px;
}
.element {
bottom: 100px;
}
.element {
right: 100px;
}
.element {
left: 100px;
}
Możemy również w prosty sposób zmodyfikować pętlę aby połączyć wszystkie wygenerowane atrybuty tylko dla jednej deklaracji jak w przykładzie poniżej.
.element {
@each $atr in $atrybuty {
#{$atr}: 100px;
}
}
// wynikiem będzie poniższy kod
.element {
top: 100px;
bottom: 100px;
right: 100px;
left: 100px;
}
Korzyści z Pętli w Sass/SCSS
Podsumowując powyższe przykłady i zwartą prezentacje możliwości pętli w Sass’ie, przyjrzyjmy się jeszcze najważniejszym korzyścią płynącym z korzystania z niego w naszych projektach.
Zasada DRY
Pętle przestrzegają zasady DRY (Don’t Repeat Yourself), eliminując nadmiarowy kod. Zamiast ręcznie pisać podobne reguły CSS, można wykorzystać pętle do ich dynamicznego generowania.
Utrzymanie
Poprzez redukcję powtarzalnego kodu, pętle ułatwiają utrzymanie arkuszy stylów. Gdy potrzebujesz wprowadzić zmiany, wystarczy zaktualizować logikę pętli, zamiast szukać i modyfikować wielokrotnie powtarzający się kod.
Skalowalność
Wraz z rozwojem projektu, pętle ułatwiają skalowanie. Dodawanie nowych elementów lub właściwości staje się łatwe, ponieważ można polegać na pętlach do automatycznego obsługiwania powtarzalnych zadań.
Podsumowanie
Pętle w Sass/SCSS są niezbędnymi narzędziami do przetwarzania CSS, umożliwiającymi programistom pisanie czystszej i bardziej wydajnej pracy. Poprzez automatyzację powtarzalnych zadań, pętle przestrzegają zasady DRY, poprawiają utrzymywać aktualny kod i ułatwiają skalowanie. Bez względu na to, czy iterujemy po wartościach liczbowych czy listach, pętle pozwalają na usprawnienie pracy z CSS i budowę solidnych, łatwych w utrzymaniu arkuszy stylów. Opanowanie pętli w Sass/SCSS to podstawowy krok w budowaniu spójnych i nowoczesnych layoutów w nowoczesnych projektach stron internetowych.
