Articles
Introduktion til SASS/SCSS
Iteration i SASS

Iteration i SASS

Denne artikel forklarer, hvordan man håndterer iteration i SASS.

Vi forklarer trin for trin, hvordan man udfører iteration i SASS ved hjælp af faktiske kodeeksempler.

YouTube Video

Iteration i SASS

Iteration i SASS hjælper med at undgå kode-duplikering og gør det muligt at skabe fleksible og genanvendelige stilarter.

Grunde til at bruge iteration i SASS

Der er flere fordele ved at bruge iteration, såsom følgende:.

  • Genanvendelighed af kode forbedres, hvilket gør det let at generere lignende mønster-stilarter.
  • Vedligeholdelse forbedres, så det er nemmere at ændre stilarter på én gang.
  • Det reducerer også fejl.

For eksempel kan du generere stilarter til knapper med forskellige farver eller komponenter i flere størrelser på én gang.

Syntaks, der bruges til iteration i SASS

Den vigtigste syntaks til iteration i SASS er som følger:.

  • Ved at bruge @for kan du iterere over et specificeret interval af tal.
  • Med @each kan du iterere over lister eller maps i din iteration.
  • Med @while kan du gentage, indtil en bestemt betingelse er opfyldt.

Iteration med @for

@for udfører gentagen behandling baseret på et specificeret interval af tal.

Syntaks 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Angiv start- og slutværdi for <start> og <end>. Ved brug af to udelukkes slutværdien, mens through inkluderer den.

Eksempel

Følgende kode genererer automatisk klasser med stigende kantbredde med 1px hver gang.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Denne kode genererer automatisk klasser for kanttykkelser, der øges med 1px hver gang. @for-direktivet bruges her til at gentage fra 1 til 5.

Genereret 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 fra .border-1 til .border-5 vil blive genereret sekventielt, hvor hver kant bliver 1px tykkere.

Iteration med @each

@each gennemløber lister eller maps. Det er nyttigt, når du effektivt vil generere klasser efter et mønster.

Syntaks 

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

Eksempel 1: Brug af en liste

Følgende kode genererer flere tekstfarveklasser.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Denne kode genererer automatisk tekstfarveklasser for hver farve i listen. @each-direktivet bruges til at behandle hver værdi i listen sekventielt.

Genereret 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 kompileres til CSS, genereres klasser som .text-red, .text-blue og .text-green for hver farve i listen.

Eksempel 2: Brug af et map

Med et map kan du håndtere par af nøgler og værdier. I følgende eksempel er baggrundsfarver til knapper defineret ved hjælp af et map.

 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}

Genereret 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 kompileres til CSS, genereres klasser som .bg-primary, .bg-success og .bg-danger for hver nøgle i mappet.

Iteration med @while

@while fortsætter gentagelsen, så længe betingelsen er sand.

Syntaks 

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

Eksempel

For eksempel, hvis du vil øge skriftstørrelsen trin for trin, kan du skrive det således:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Du kan bruge @while-direktivet til at udføre iteration, når du øger skrifttypestørrelser i trin. Ved at bruge variablen $i genereres klasser automatisk for værdier fra 1 til 5.

Genereret 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 kompileres til CSS, genereres klasser med skrifttypestørrelser, der vokser fra 1rem til 5rem, automatisk.

Avanceret eksempel: Kombinér iteration og nesting

Ved at kombinere iteration med SASS's nestingsfunktion muliggøres endnu mere avanceret stilgenerering.

Eksempel

Nedenfor er et eksempel, hvor baggrunds- og hoverfarver for knapper defineres sammen.

 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}
  • Ved at kombinere iteration og SASS-nestning kan du generere knapbaggrundsfarver og hover-farver på én gang. For hver farve i kortet oprettes en .btn--klasse, og :hover-stilen defineres ved hjælp af nestning.

Genereret 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 konverterer SASS-filen til CSS, genereres baggrundsfarven og hover-farven for hver knap automatisk, og :hover-stilarterne defineres samlet ved hjælp af indlejring.

Vigtige punkter ved brug af iteration

Hav følgende punkter i tankerne, når du bruger iteration for at skrive mere effektiv og læsbar kode.

  1. Undgå alt for dyb nesting For meget nesting reducerer læsbarheden, så hold det på et minimum.

  2. Overvej ydelsesmæssige konsekvenser Hvis der genereres for mange klasser via iteration, kan din CSS blive unødvendigt stor.

  3. Brug passende variabelnavne For variabler som $i eller $item, brug meningsfulde navne for at gøre din kode lettere at forstå.

Sammendrag

Ved at bruge iteration i SASS opnås et effektivt og letvedligeholdeligt style-design. Især gør valget mellem @for, @each og @while det muligt at generere dynamisk og fleksibel CSS.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

SASS' `if`-funktionOperatorer i SASS