Articles
Inleiding tot SASS/SCSS
Iteratie in SASS

Iteratie in SASS

Dit artikel legt uit hoe je iteratie in SASS kunt toepassen.

We leggen stap voor stap uit hoe je iteratie in SASS uitvoert met echte codevoorbeelden.

YouTube Video

Iteratie in SASS

Iteratie in SASS helpt om code duplicatie te voorkomen en maakt het mogelijk om flexibele en herbruikbare stijlen te creëren.

Redenen om iteratie in SASS te gebruiken

Er zijn verschillende voordelen aan het gebruik van iteratie, zoals de volgende:.

  • Hergebruikbaarheid van code wordt verbeterd, waardoor het eenvoudig is om vergelijkbare patroonstijlen te genereren.
  • Onderhoudbaarheid wordt verbeterd, waardoor het makkelijker wordt om stijlen in één keer aan te passen.
  • Vermindert ook fouten.

Je kunt bijvoorbeeld in één keer stijlen genereren voor knoppen met verschillende kleuren of componenten in meerdere groottes.

Syntaxis voor iteratie in SASS

De belangrijkste syntaxis voor iteratie in SASS is als volgt:.

  • Met @for kun je itereren over een opgegeven bereik van getallen.
  • Met @each kun je overlopen door lijsten of mappen tijdens je iteratie.
  • Met @while kun je blijven herhalen totdat aan een bepaalde voorwaarde is voldaan.

Iteratie met @for

@for voert herhaalde bewerkingen uit op basis van een opgegeven bereik van getallen.

Syntax 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Geef de begin- en eindwaarden op voor <start> en <end>. to sluit de eindwaarde uit, terwijl through deze juist insluit.

Voorbeeld

De volgende code genereert automatisch klassen met een oplopende randdikte van 1px per stuk.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Deze code genereert automatisch klassen voor een randdikte die telkens met 1px toeneemt. De @for-directive wordt hier gebruikt om te herhalen van 1 tot 5.

Gegenereerde 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}
  • Klassen van .border-1 tot .border-5 worden achtereenvolgens gegenereerd, waarbij elke rand telkens 1px dikker wordt.

Iteratie met @each

@each voert lussen uit met behulp van lijsten of mappen. Het is handig als je efficiënt herhalende klassen wilt genereren.

Syntax 

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

Voorbeeld 1: Een lijst gebruiken

De volgende code genereert meerdere tekstkleur-klassen.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Deze code genereert automatisch tekstkleur-klassen voor elke kleur in de lijst. Met de @each-directive wordt elke waarde in de lijst achtereenvolgens verwerkt.

Gegenereerde CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Wanneer het SASS-bestand naar CSS wordt gecompileerd, worden klassen zoals .text-red, .text-blue en .text-green gegenereerd voor elke kleur in de lijst.

Voorbeeld 2: Een map gebruiken

Met een map kun je werken met sleutel-waardeparen. In het volgende voorbeeld worden knopachtergrondkleuren gedefinieerd met een 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}

Gegenereerde 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}
  • Wanneer het SASS-bestand naar CSS wordt gecompileerd, worden klassen zoals .bg-primary, .bg-success en .bg-danger voor elke sleutel in de map gegenereerd.

Iteratie met @while

@while blijft herhalen zolang de voorwaarde waar is.

Syntax 

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

Voorbeeld

Als je bijvoorbeeld de lettergrootte stapsgewijs wilt verhogen, kun je het als volgt schrijven:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Je kunt de @while-directive gebruiken voor iteratieve bewerking wanneer je lettergroottes stapsgewijs vergroot. Met behulp van de variabele $i worden klassen automatisch gegenereerd voor waarden van 1 tot 5.

Gegenereerde 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}
  • Wanneer het SASS-bestand naar CSS wordt gecompileerd, worden automatisch klassen gegenereerd met lettergroottes van 1rem tot 5rem.

Geavanceerd voorbeeld: Iteratie combineren met nesten

Door iteratie te combineren met de nestfunctionaliteit van SASS kun je nog geavanceerdere stijlen genereren.

Voorbeeld

Hieronder zie je een voorbeeld waarbij achtergrond- en hoverkleuren voor knoppen samen worden gedefinieerd.

 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}
  • Door iteratie en SASS-nesting te combineren, kun je in één keer de achtergrondkleuren en hoverkleuren van knoppen genereren. Voor elke kleur in de map wordt er een .btn--klasse aangemaakt en wordt de :hover-stijl gedefinieerd met behulp van nesting.

Gegenereerde 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}
  • Wanneer je het SASS-bestand naar CSS converteert, worden de achtergrondkleur en hoverkleur voor elke knop automatisch gegenereerd, en worden de :hover-stijlen gezamenlijk gedefinieerd met behulp van nesting.

Aandachtspunten bij het gebruik van iteratie

Houd de volgende punten in gedachten wanneer je iteratie gebruikt om efficiëntere en leesbare code te schrijven.

  1. Vermijd te diepe nesting Te veel nesting vermindert de leesbaarheid, houd het daarom tot het noodzakelijke minimum.

  2. Houd rekening met prestatie-invloed Als door iteratie te veel klassen worden gegenereerd, kan je CSS onnodig groot worden.

  3. Gebruik geschikte variabelenamen Gebruik voor variabelen zoals $i of $item betekenisvolle namen om je code begrijpelijker te maken.

Samenvatting

Door iteratie in SASS te gebruiken, kun je efficiënte en onderhoudbare stijlen ontwerpen. Met name door te kiezen tussen @for, @each en @while kun je dynamische en flexibele CSS genereren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

De `if`-functie in SASSOperatoren in SASS