Директива @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;
}
}