, чтобы сохранить свой прогресс
Используйте @ для создания петли Sass
Директива @for добавляет стили в цикле, очень похожие for цикл for в JavaScript. @for используется двумя способами: «начать с конца» или «начать с конца». Основное различие заключается в том, что «начало к концу» исключает конечный номер, а «начало через конец» включает конечный номер. Вот начало через конец , например:
@for $ i от 1 до 12 {Часть
.col - # {$ i} {width: 100% / 12 * $ i; }
}
#{$i} - это синтаксис для объединения переменной ( i ) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так: .col-1 {Это мощный способ создания сетки. Теперь у вас есть двенадцать вариантов ширины столбцов, доступных как классы CSS.
ширина: 8,33333%;
}
.col-2 {
ширина: 16,66667%;
}
...
.col-12 {
ширина: 100%;
}
Напишите директиву @for которая принимает переменную $j которая идет от 1 до 6. Она должна создать 5 классов с именем .text-1 to .text-5 где каждый имеет font-size установленный в 10px, умноженный на индекс.
/**
* Your test output will go here.
*/