@for-direktivet i SASS

Med @for-direktivet kan du skrive ut spesifikke stiler i en mengde spesifisert av en tellervariabel. Den første skrivemåten for @for ser slik ut:

scss@for $var from (begin) through (end)

I dette tilfellet er verdiene (begin) og (end) inkludert i området. Det er verdt å merke seg at (begin) og (end) må returnere heltall, siden de definerer tellerretningen, dvs. hvis (begin) er mindre enn (end), vil telleren øke, og omvendt vil den minke.

La oss se på hvordan @for-direktivet fungerer med den første syntaksvarianten ved hjelp av 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; 
}

Den andre skrivemåten ser slik ut:

scss@for $var from (begin) to (end)

Her blir verdien (end) utelatt.

La oss ta det forrige eksemplet og skrive det med den andre varianten:

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

Legg merke til den resulterende koden:

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;
  }
}