Задание "Apply a Style Until a Condition is Met with @while".

, чтобы сохранить свой прогресс

Применить стиль до тех пор, пока условие не встретится с @while

@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, умноженный на текущий номер индекса. Обязательно избегайте бесконечного цикла!

⌛

Your code should use the @while directive.

⌛

Your code should use an index variable which starts at an index of 1.

⌛

Your code should increment the counter variable.

⌛

Your .text-1 class should have a font-size of 15px.

⌛

Your .text-2 class should have a font-size of 30px.

⌛

Your .text-3 class should have a font-size of 45px.

⌛

Your .text-4 class should have a font-size of 60px.

⌛

Your .text-5 class should have a font-size of 75px.

/** * Your test output will go here. */