@for-direktivet i SASS

Med @for-direktivet kan man udskrive bestemte stilarter i en mængde, angivet af en tællevariabel. Den første skrivemåde for @for ser sådan ud:

scss@for $var from (start) through (slut)

I dette tilfælde inkluderes værdierne (start) og (slut) strengt taget i intervallet. Det er værd at bemærke, at (start) og (slut) skal returnere heltal, da de angiver tælleretningen, dvs. hvis (start) er mindre end (slut), vil tælleren stige, og omvendt, hvis det er modsat - falde.

Lad os se på @for-direktivets funktion i den første syntaksvariant med følgende eksempel:

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Kompileringsresultat:

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

I den anden variant ser skrivemåden således ud:

scss@for $var from (start) to (slut)

Her bliver værdien (slut) udeladt.

Lad os tage det forrige eksempel og skrive det i den anden variant:

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Læg nu mærke til den resulterende kode:

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}