Articles
Wprowadzenie do SASS/SCSS
Iteracja w SASS

Iteracja w SASS

Ten artykuł wyjaśnia, jak obsługiwać iterację w SASS.

Wyjaśnimy krok po kroku, jak wykonywać iterację w SASS, używając rzeczywistych przykładów kodu.

YouTube Video

Iteracja w SASS

Iteracja w SASS pomaga unikać powielania kodu i pozwala tworzyć elastyczne i wielokrotnego użytku style.

Powody używania iteracji w SASS

Istnieje kilka zalet używania iteracji, takich jak:.

  • Możliwość ponownego użycia kodu rośnie, co ułatwia generowanie podobnych stylów wzorców.
  • Łatwiejsza konserwacja, co ułatwia zmianę stylów jednocześnie.
  • Zmniejsza również liczbę błędów.

Na przykład, możesz wygenerować style dla przycisków w różnych kolorach lub komponentów w wielu rozmiarach jednocześnie.

Składnia używana do iteracji w SASS

Główna składnia używana do iteracji w SASS wygląda następująco:.

  • Używając @for, możesz wykonywać iterację po określonym zakresie liczb.
  • Używając @each, możesz iterować po listach lub mapach.
  • Używając @while, możesz wykonywać pętlę, dopóki nie zostanie spełniony określony warunek.

Iteracja z użyciem @for

@for wykonuje powtarzające się operacje na podstawie określonego zakresu liczb.

Składnia 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Określ wartości początkowe i końcowe dla <start> i <end>. Użycie to wyklucza wartość końcową, a through ją uwzględnia.

Przykład

Poniższy kod automatycznie generuje klasy ze wzrastającą grubością obramowania o 1px każda.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Ten kod automatycznie generuje klasy dla grubości obramowania zwiększającej się o 1px. Dyrektywa @for jest tu używana do pętli od 1 do 5.

Wygenerowany CSS 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Klasy od .border-1 do .border-5 zostaną wygenerowane po kolei, z każdym obramowaniem zwiększonym o 1px.

Iteracja z użyciem @each

@each wykonuje pętlę za pomocą list lub map. Jest przydatna, gdy chcesz efektywnie generować zróżnicowane klasy.

Składnia 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Przykład 1: Użycie listy

Poniższy kod generuje wiele klas kolorów tekstu.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Ten kod automatycznie generuje klasy kolorów tekstu dla każdego koloru na liście. Dyrektywa @each służy do przetwarzania każdej wartości z listy po kolei.

Wygenerowany CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Gdy plik SASS zostanie skompilowany do CSS, klasy takie jak .text-red, .text-blue i .text-green zostaną wygenerowane dla każdego koloru z listy.

Przykład 2: Użycie mapy

Użycie mapy pozwala obsługiwać pary klucz-wartość. W poniższym przykładzie kolory tła przycisków są definiowane przy użyciu mapy.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

Wygenerowany CSS 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Kiedy plik SASS zostanie skompilowany do CSS, klasy takie jak .bg-primary, .bg-success i .bg-danger zostaną wygenerowane dla każdego klucza w mapie.

Iteracja przy użyciu @while

@while kontynuuje pętlę, dopóki warunek jest spełniony.

Składnia 

1/*
2@while <condition> {
3  ...
4}
5*/

Przykład

Na przykład, jeśli chcesz krok po kroku zwiększać rozmiar czcionki, możesz to zapisać w następujący sposób:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Możesz użyć dyrektywy @while do przeprowadzania iteracji podczas zwiększania rozmiaru czcionki etapami. Używając zmiennej $i, klasy są automatycznie generowane dla wartości od 1 do 5.

Wygenerowany CSS 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Gdy plik SASS zostanie skompilowany do CSS, klasy z rozmiarami czcionki od 1rem do 5rem zostaną wygenerowane automatycznie.

Zaawansowany przykład: Łączenie iteracji z zagnieżdżeniami

Łącząc iterację z funkcją zagnieżdżania w SASS, uzyskasz jeszcze bardziej zaawansowane generowanie stylów.

Przykład

Poniżej przykład, w którym kolory tła i kolory po najechaniu dla przycisków są definiowane razem.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Łącząc iterację oraz zagnieżdżanie w SASS, możesz jednocześnie generować kolory tła przycisków oraz kolory dla efektu najechania kursorem. Dla każdego koloru w mapie tworzona jest klasa .btn-, a styl :hover jest definiowany z użyciem zagnieżdżania.

Wygenerowany CSS 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Podczas konwertowania pliku SASS na CSS, kolory tła i kolory po najechaniu dla każdego przycisku są generowane automatycznie, a style :hover są definiowane zbiorczo przy użyciu zagnieżdżania.

Wskazówki przy korzystaniu z iteracji

Miej na uwadze poniższe punkty, aby pisać bardziej wydajny i czytelny kod przy użyciu iteracji.

  1. Unikaj nadmiernego zagnieżdżania Nadmierne zagnieżdżenia zmniejszają czytelność, więc ogranicz je do minimum.

  2. Zwróć uwagę na wpływ na wydajność Jeśli przez iterację wygenerujesz zbyt wiele klas, Twój CSS może niepotrzebnie się rozrosnąć.

  3. Używaj odpowiednich nazw zmiennych Dla zmiennych takich jak $i lub $item stosuj znaczące nazwy, aby kod był łatwiejszy do zrozumienia.

Podsumowanie

Wykorzystanie iteracji w SASS pozwala na wydajne i łatwe w utrzymaniu projektowanie stylów. W szczególności, wybór pomiędzy @for, @each a @while pozwala generować dynamiczny i elastyczny CSS.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Funkcja `if` w SASS