@for direktīva SASS

Ar @for direktīvas palīdzību var izvadīt noteiktus stilus daudzumā, ko norāda skaitītāja mainīgais. Pirmais ieraksta variants @for izskatās šādi:

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

Šajā gadījumā diapazonā stingri tiek iekļautas vērtības (begin) un (end). Vērts pievērst uzmanību tam, ka (begin) un (end) - ir jāatgriež veselus skaitļus, jo tie nosaka skaitīšanas virzienu, t.i., ja (begin) ir mazāks par (end), skaitītājs pieaugs un attiecīgi, ja otrādi - samazināsies.

Apskatīsim @for direktīvas darbību pirmajā sintakses variantā ar šādu piemēru:

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

Kompilācijas rezultāts:

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

Otrajā variantā ieraksts izskatās šādi:

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

Šajā gadījumā (end) vērtība tiek izmesta.

Paņemsim iepriekšējo piemēru un ierakstīsim to otrajā variantā:

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

Tagad pievērsiet uzmanību iegūtajam kodam:

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