# Директива @for в SASS

С помощью директивы `@for` можно вывести определенные стили в количестве, указанном переменной-счетчиком. Первый вариант записи `@for` выглядит так: `@for $var from (начало) through (конец)`. В этом случае в диапазон строго включаются значения (начало) и (конец). Стоит обратить внимание на то, что (начало) и (конец) - должны возвращать целые числа, поскольку они задают направление счёта, т.е. если (начало) меньше, чем (конец), счётчик будет расти и соответственно, если наоборот - убывать.

Рассмотрим работу директивы `@for` в первом варианте синтаксиса на следующем примере:

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

Результат компиляции:

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

Во втором варианте запись выглядит следующим образом: `@for $var from (начало) to (конец)`. Причем здесь значение (конец) отбрасывается.

Возьмем предыдущий пример и запишем его во втором варианте:

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

Теперь обратите внимание на получившийся код:

`.li-1 { width: 1px; } .li-2 { width: 2px; } .li-3 { width: 3px; } .li-4 { width: 4px; }`

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

`@for $var from 1 to 3 { .navbar-link-#{$var} { color: blue; width: 10px * $var; } }`
← →
↑