SASS даги @for директиваси

@for директиваси ёрдамида ўзгарувчи-ҳисоблаганда кўрсатилган миқдордаги маълул стилларни чиқариш мумкин. @for нинг биринчи ёзиш варианти шундай кўринишади:

scss@for $var from (бошланиш) through (тугаш)

Бу ҳолда диапазонга (бошланиш) ва (тугаш) қийматлари қатъий киритилади. Эътибор бериш керакки, (бошланиш) ва (тугаш) бутун сонларни қайтариши керак, чунки улар ҳисоблаш йўналишини белгилайди, яъни агар (бошланиш) (тугаш) дан кичик бўлса, ҳисобланувчи ўсади ва мос равишда, агар аксарча - камаяди.

@for директивасининг ишини биринчи синтаксис вариантида куйидаги мисолда кўриб чиқамиз:

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

Компиляция натижаси:

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

Иккинчи вариангда ёзиш куйидагича кўринишади:

scss@for $var from (бошланиш) to (тугаш)

Бунда (тугаш) қиймати ташланади.

Олдинги мисолни оламиз ва уни иккинчи вариангда ёзайлик:

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

Энди ҳосил бўлган кодга эътибор беринг:

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