Если вы использовали Sass какое-то время или смотрели код фреймворка, такого как Foundation, вы заметите множество расширенных функций, используемых в миксинах. Эти миксины используют управляющие директивы, такие как @if и @for, для выполнения таких задач, как настройка классов для систем сетки.
Продолжая основы Sass, мы обсудим эти управляющие директивы и посмотрим, как вы можете использовать их в своих проектах. Возможно, вам никогда не понадобится использовать эти директивы управления, но всегда полезно знать, какие инструменты в вашем распоряжении.
если()
Это немного отличается тем, что это не директива управления, а встроенная функция в Sass. Не так, как директива @if, if () позволяет вам проверять условие и возвращать одно из двух возможных значений. Условие, которое мы проверяем, является истинным или ложным. Например:
@mixin test($condition) {
$color: if($condition, blue, red);
color:$color
}
.firstClass {
@include test(true);
}
.secondClass {
@include test(false);
}Это компилируется в:
.firstClass {
color: blue;
}
.secondClass {
color: red;
}
Аргументы функции if () — это условие для проверки, истинный результат и ложный результат. Любое значение, кроме false или null, считается истинным. В приведенном выше примере мы можем заменить число на true и получить тот же результат.
.firstClass {
@include test(1);
}
@если
Директива @if принимает выражение и возвращает стили, если оно приводит к чему-либо, кроме false или null. Например:
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
}
.txt1 {
@include txt(none);
}
.txt2 {
@include txt(bold);
}
Что дает нам:
.txt1 {
color: white;
}
.txt2 {
color: white;
font-weight: bold;
}
Мы можем расширить директиву @if несколькими операторами @else if и одним последним @else. Таким образом, мы можем проверить несколько условий. Мы можем остановиться на последнем примере, как это.
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
@else if $weight == light { font-weight: 100;}
@else if $weight == heavy { font-weight: 900;}
@else { font-weight: normal;}
}
.txt1 {
@include txt(bold);
}
.txt2 {
@include txt(light);
}
.txt3 {
@include txt(heavy);
}
.txt4 {
@include txt(none);
}
.txt5 {
@include txt(normal)
}
Это в свою очередь дает нам
.txt1 {
color: white;
font-weight: bold;
}
.txt2 {
color: white;
font-weight: 100;
}
.txt3 {
color: white;
font-weight: 900;
}
.txt4 {
color: white;
font-weight: normal;
}
.txt5 {
color: white;
font-weight: normal;
}
Я включил два последних класса, чтобы продемонстрировать, как добавление @else меняет работу директивы @if. В первом примере без использования жирного шрифта в качестве аргумента это не даст нам веса шрифта. Когда вы добавляете @else, любой аргумент, который не соответствует другим @if или @else if, получит стили оператора @else. Вот почему .txt4.txt5
@за
Директива @for позволяет вам выводить стили в цикле. Директива может использоваться как начало от конца или начало до конца. Разница в том, что начало до конца включает конечный номер, а начало до конца не включает конечный номер. Оператор @for использует переменную для отслеживания цикла по диапазонам. Если мы хотим сделать обратный отсчет, а не вверх, мы бы сделали наш начальный номер больше нашего конечного номера. Давайте посмотрим, как мы устанавливаем оператор @for.
@for $i from 1 through 12 {
.col-#{$i} { width: 100/12 * $i;}
}
Вот оператор @for, который мы могли бы использовать для настройки столбцов для системы сетки. За @for следует переменная, в данном случае $ i. Затем мы следуем этому с from и с нашего начального (1) до конечного (12) числа. При каждом повторении цикла мы генерируем стиль. Обратите внимание, как мы используем интерполяцию, чтобы использовать переменную как часть классов, которые мы генерируем.
.col-1 {
width: 8.33333;
}
.col-2 {
width: 16.66667;
}
.col-3 {
width: 25;
}
.col-4 {
width: 33.33333;
}
Я не включил все стили, сгенерированные @for, так как они идут вплоть до 12. Как вы можете видеть на каждом проходе цикла, стиль создавался со значением переменной, добавляемой к имени класса. , Мы также сделали расчет на основе переменной, чтобы получить правильную ширину.
@each
Директива @each использует список или карту вместо начальных и конечных значений. На каждом проходе цикла переменной присваивается значение из списка или карты.
@each $usr in bob, john, bill, mike {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
За директивой @each следует наша переменная $usr После этого у нас есть список, который будет присвоен переменной $usr Мы также могли бы использовать карту в качестве аргумента. После этого мы используем интерполяцию для построения нашего класса, а также для отображения правильной картинки.
.bob-avatar {
background-image: url("/img/bob.png");
}
.john-avatar {
background-image: url("/img/john.png");
}
.bill-avatar {
background-image: url("/img/bill.png");
}
.mike-avatar {
background-image: url("/img/mike.png");
}
Если мы собирались использовать карту, мы должны изменить наш оператор @each и использовать множественное присваивание. Мы можем использовать карту в выражении @each следующим образом.
$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );
@each $key, $usr in $ppl {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
Мы должны добавить вторую переменную для хранения ключа каждого значения. Если мы этого не сделали, вместо того, чтобы получить тот же результат, что и в предыдущем примере, наши ключи и значения будут в стилях, которые мы генерируем. Мы также можем использовать несколько назначений в списках.
$alt: alert, yellow, red;
$sub: submit, white, green;
$bck: back, blue, transparent;
@each $type, $txt, $back in $alt,$sub,$bck {
.#{$type}-button {
color: $txt;
background-color: $back;
}
}
Здесь мы берем несколько списков и используем их для построения наших классов. При прохождении каждого списка элементы в списке присваиваются переменным в операторе @each. Это дает нам:
.alert-button {
color: yellow;
background-color: red;
}
.submit-button {
color: white;
background-color: green;
}
.back-button {
color: blue;
background-color: transparent;
}
@пока
Директива @ while выводит стили, пока оператор не станет ложным. Подобно директиве @for, директива @ while дает нам больше гибкости в наших циклах. Я могу переписать директиву @for сверху как цикл @ while.
$x:1;
@while $x < 13 {
.col-#{$x} { width: 100/12 * $x;}
$x: $x + 1;
};
Вместо того, чтобы устанавливать наш диапазон внутри нашего оператора как директива @for, мы устанавливаем значение в нашей переменной. Затем мы используем это значение в качестве нашего теста против оператора @ while. В этом случае мы сказали, что, пока $ x меньше 13, выводим стили. Как только мы достигнем 13, утверждение будет ложным, и цикл остановится. Главное, что нужно помнить — увеличивать переменную, иначе ваш цикл никогда не закончится. Как вы можете видеть, пример добавляет 1 к нашей переменной, пока не достигнет 13.
Вывод
Sass действительно включает в себя множество мощных функций, которые облегчают разработку нашего интерфейса. Несмотря на то, что управляющие директивы являются мощными, если вы не строите большую структуру, вы не сможете найти для них много применений. Как я уже говорил ранее, важно знать доступные вам инструменты. Возможно, однажды вы найдете применение одной из этих управляющих директив.