2.4 KiB
2.4 KiB
title | localeTitle |
---|---|
Use @for to Create a Sass Loop | Используйте @ для создания петли Sass |
Используйте @ для создания петли Sass
- Основной синтаксис цикла
@for
в SASS:
- Проходной цикл:
@for $i from <start number> through <end number> {
// some CSS
}
- For-to loop:
@for $i from <start number> to <end number> {
// some CSS
}
Обратите внимание, что основное отличие состоит в том, что «начало к концу» исключает конечный номер, а «начальный конец» включает конечный номер.
- Например:
- Проходной цикл:
@for $i from 1 through 3 {
// some CSS
}
// 1 2
- For-to loop:
@for $i from 1 to 3 {
// some CSS
}
// 1 2 3
- Руководящий принцип от SASS Guideline
Цикл @for
может быть полезен в сочетании с CSS :nth-*
псевдоклассы. За исключением этих сценариев, предпочитайте цикл @each
если вам нужно перебирать что-то.
@for $i from 1 through 10 {
.foo:nth-of-type(#{$i}) {
border-color: hsl($i * 36, 50%, 50%);
}
}
Всегда используйте $i
как имя переменной, чтобы придерживаться обычного соглашения, и если у вас нет по-настоящему веской причины, никогда не используйте ключевое слово: всегда используйте. Многие разработчики даже не знают, что Sass предлагает этот вариант; использование этого может привести к путанице.
Также не забудьте соблюдать эти рекомендации для сохранения читаемости:
- Всегда пустая новая строка перед
@for
; - Всегда пустая новая строка после закрывающей скобки (}), если следующая строка не является закрывающей скобкой (}).