Articles
Introduksjon til SASS/SCSS
Iterasjon i SASS

Iterasjon i SASS

Denne artikkelen forklarer hvordan du håndterer iterasjon i SASS.

Vi vil forklare hvordan du utfører iterasjon i SASS steg for steg, ved å bruke faktiske kodeeksempler.

YouTube Video

Iterasjon i SASS

Iterasjon i SASS hjelper til å unngå kode-duplisering og lar deg lage fleksible og gjenbrukbare stiler.

Grunner til å bruke iterasjon i SASS

Det finnes flere fordeler med å bruke iterasjon, som for eksempel:.

  • Gjenbrukbarhet av kode forbedres, noe som gjør det enkelt å generere lignende stil-mønstre.
  • Vedlikeholdbarhet forbedres, slik at det er lettere å endre stiler på en gang.
  • Det reduserer også feil.

For eksempel kan du generere stiler for knapper med ulike farger eller komponenter med ulike størrelser samtidig.

Syntaks brukt for iterasjon i SASS

Hovedsyntaksen brukt for iterasjon i SASS er som følger:.

  • Ved å bruke @for kan du iterere over et spesifisert tallområde.
  • Med @each kan du iterere over lister eller maps.
  • Med @while kan du loope til en viss betingelse er oppfylt.

Iterasjon med @for

@for utfører gjentatt behandling basert på et spesifisert tallområde.

Syntaks 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Angi start- og sluttverdiene for <start> og <end>. Ved å bruke to utelates sluttverdien, mens through inkluderer den.

Eksempel

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

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Denne koden genererer automatisk klasser for kanttykkelser som øker med 1px hver. @for-direktivet brukes her for å iterere fra 1 til 5.

Generert 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}
  • Klassene fra .border-1 til .border-5 blir generert etter hverandre, der hver kant øker med 1px i tykkelse.

Iterasjon med @each

@each itererer over lister eller maps. Det er nyttig når du vil generere mønstrede klasser effektivt.

Syntaks 

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

Eksempel 1: Bruke en liste

Følgende kode genererer flere tekstfarge-klasser.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Denne koden genererer automatisk tekstfarge-klasser for hver farge i listen. @each-direktivet brukes til å behandle hver verdi i listen etter tur.

Generert 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 farge i listen.

Eksempel 2: Bruke et kart (map)

Ved å bruke et kart (map) kan du håndtere par med nøkler og verdier. I eksemplet under defineres bakgrunnsfarger for knapper ved hjelp av 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}

Generert 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økkel i kartet (map).

Iterasjon med @while

@while fortsetter loopen så lenge betingelsen er sann.

Syntaks 

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

Eksempel

For eksempel, hvis du vil øke skriftstørrelsen trinn for trinn, kan du skrive det slik:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Du kan bruke @while-direktivet for iterativ prosessering når du øker skriftstørrelse i trinn. Ved å bruke variabelen $i genereres klasser automatisk for verdier fra 1 til 5.

Generert 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 skriftstørrelser som øker fra 1rem til 5rem automatisk.

Avansert eksempel: Kombinere iterasjon og innrykk (nesting)

Å kombinere iterasjon med SASS sitt nestings-funksjon gir enda mer avansert stilgenerering.

Eksempel

Nedenfor er et eksempel der bakgrunns- og hover-farger for knapper er definert 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 å kombinere iterasjon og SASS-nesting, kan du generere knappens bakgrunnsfarger og hover-farger på én gang. For hver farge i kartet opprettes en .btn--klasse, og :hover-stilen defineres ved hjelp av nesting.

Generert 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, blir bakgrunnsfargen og hover-fargen for hver knapp generert automatisk, og :hover-stilene blir definert samlet ved bruk av nesting.

Viktige punkter ved bruk av iterasjon

Husk følgende punkter når du bruker iterasjon for å skrive mer effektiv og lesbar kode.

  1. Unngå for dype nesting For mye nesting reduserer lesbarheten, så hold det til et minimum.

  2. Vurder ytelsespåvirkning Hvis for mange klasser genereres med iterasjon, kan CSS-en din bli unødvendig stor.

  3. Bruk passende variabelnavn For variabler som $i eller $item, bruk meningsfulle navn for å gjøre koden enklere å forstå.

Sammendrag

Bruk av iterasjon i SASS gir effektiv og vedlikeholdbar stilutforming. Spesielt gjør valget mellom @for, @each og @while det mulig å generere dynamisk og fleksibel CSS.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

if-funksjonen i SASS