Articles
Introduktion till SASS/SCSS
Iteration i SASS

Iteration i SASS

Den här artikeln förklarar hur man hanterar iteration i SASS.

Vi kommer att förklara hur man utför iteration i SASS steg för steg, med faktiska kodexempel.

YouTube Video

Iteration i SASS

Iteration i SASS hjälper dig undvika kodupprepning och gör det möjligt att skapa flexibla och återanvändbara stilar.

Anledningar att använda iteration i SASS

Det finns flera fördelar med att använda iteration, såsom följande:.

  • Återanvändbarheten av kod förbättras, vilket gör det enkelt att generera snarlika stil-mönster.
  • Underhållbarheten förbättras, vilket gör det lättare att ändra stilar på en gång.
  • Det minskar även risken för fel.

Till exempel kan du generera stilar för knappar med olika färger eller komponenter med flera storlekar på en gång.

Syntax för iteration i SASS

Den huvudsakliga syntaxen för iteration i SASS är följande:.

  • Med @for kan du iterera över ett specifikt intervall av siffror.
  • Med @each kan du genomföra loopar över listor eller mappar i din iteration.
  • Med @while kan du loopa tills ett visst villkor är uppfyllt.

Iteration med @for

@for kör upprepade processer baserat på ett angivet intervall av siffror.

Syntax 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Ange start- och slutvärden för <start> och <end>. Att använda to exkluderar slutvärdet, medan through inkluderar det.

Exempel

Följande kod genererar automatiskt klasser med stigande kanttjocklek med 1px åt gången.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Koden genererar automatiskt klasser för kanttjocklek som ökar med 1px varje gång. @for-direktivet används här för att loopa från 1 till 5.

Genererad 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}
  • Klasser från .border-1 till .border-5 genereras i ordning, där varje kanttjocklek ökar med 1px.

Iteration med @each

@each utför loopar med listor eller kartor. Det är användbart när du vill generera mönstrade klasser effektivt.

Syntax 

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

Exempel 1: Använda en lista

Följande kod genererar flera textfärgsklasser.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Koden genererar automatiskt textfärgsklasser för varje färg i listan. @each-direktivet används för att bearbeta varje värde i listan i tur och ordning.

Genererad CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • När SASS-filen kompileras till CSS genereras klasser som .text-red, .text-blue och .text-green för varje färg i listan.

Exempel 2: Använda en karta

Att använda en karta gör det möjligt att hantera nyckel- och värdepar. I följande exempel definieras bakgrundsfärger för knappar med en karta.

 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}

Genererad 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}
  • När SASS-filen kompileras till CSS genereras klasser som .bg-primary, .bg-success och .bg-danger för varje nyckel i kartan.

Iteration med @while

@while fortsätter loopen så länge villkoret är sant.

Syntax 

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

Exempel

Om du till exempel vill öka teckenstorleken stegvis kan du skriva enligt följande:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Du kan använda @while-direktivet för iterativ bearbetning när du ökar teckenstorlekar stegvis. Genom att använda variabeln $i genereras klasser automatiskt för värden från 1 till 5.

Genererad 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}
  • När SASS-filen kompileras till CSS genereras klasser med teckenstorlekar från 1rem till 5rem automatiskt.

Avancerat exempel: Kombinera iteration och nästling

Genom att kombinera iteration med SASS:s nästlingsfunktion kan du skapa ännu mer avancerade stilar.

Exempel

Nedan är ett exempel där bakgrunds- och hover-färger för knappar definieras tillsammans.

 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}
  • Genom att kombinera iteration och SASS-nästning kan du generera bakgrundsfärger och hover-färger för knappar på en och samma gång. För varje färg i kartan skapas en .btn--klass och :hover-stilen definieras med hjälp av nästning.

Genererad 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}
  • När du konverterar SASS-filen till CSS genereras automatiskt bakgrundsfärg och hover-färg för varje knapp, och :hover-stilarna definieras gemensamt med hjälp av nästning.

Viktiga punkter vid användning av iteration

Tänk på följande punkter när du använder iteration för att skriva effektivare och mer lättläst kod.

  1. Undvik alltför djup nästling Alltför djup nästling minskar läsbarheten, så håll det till ett minimum.

  2. Tänk på prestanda Om för många klasser genereras genom iteration kan din CSS bli onödigt stor.

  3. Använd lämpliga variabelnamn För variabler som $i eller $item, använd beskrivande namn för att göra din kod enklare att förstå.

Sammanfattning

Att använda iteration i SASS ger en effektiv och lättskött stilutveckling. Särskilt valet mellan @for, @each och @while gör det möjligt att generera dynamisk och flexibel CSS.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Funktionen `if` i SASS