, чтобы сохранить свой прогресс
Используйте @ для создания петли 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.
*/