@while директива является вариантом с аналогичной функциональностью на JavaScript в while цикл. Он создает правила CSS до тех пор, пока не будет выполнено условие. Задача @for привела пример создания простой сетки. Это также может работать с @while .
$ x: 1;Сначала определите переменную
@while $ x <13 {
.col - # {$ x} {width: 100% / 12 * $ x;}
$ x: $ x + 1;
}
$x и установите ее в 1. Затем используйте директиву @while для создания сетки, а $x меньше 13. После установки правила CSS для width $x увеличивается на 1, чтобы избежать бесконечная петля.Используйте @while для создания серии классов с разными font-sizes . Должно быть 10 разных классов из text-1 в text-10 . Затем установите font-size в 5px, умноженный на текущий номер индекса. Обязательно избегайте бесконечного цикла!