Управляющие конструкции препроцессоров — основа, позволяющая сократить исходный код в несколько раз и сделать возможным написание собственного CSS-фреймворка. Данный материал тем, кто начинает работать с любым препроцессором: понимаешь один — понимаешь все.
Все управляющие конструкции SASS начинаются с символа @: «коммерческое at». В SASS их целых четыре вида.
@for
Запись @for $var from <start> through <end> читается как: для каждого элемента от
стартовой точки до конечной.
Представьте, что у вас 100 иконок с разным значением background-image.
Разумеется, базовый класс, общий для всех, тоже есть. Что делать? Итерацию с @for.
$img: 'assets/images'; /* физическое расположение иконок */
$class-slug: 'icon'; /* базовое имя класса */
/* модифицировать каждую из ста иконок */
@for $i from 1 through 100 {
.#{$class-slug}__#{$i} {
background-image: url("#{$img}/#{$class-slug}-#{$i}.svg");
}
}
/* получаем в итоге */
.icon__1 {
background-image: url("assets/images/icon-1.svg");
}
.icon__100 {
background-image: url("assets/images/icon-100.svg");
}Да, называть иконки таким образом не всегда разумно, но для понимания цикла сгодится. Возможно, реальные примеры кода из репозитория Bootstrap понравятся вам больше. Рекомендую взглянуть как-нибудь на четвёртую версию фреймворка, которая написана на SASS.
@if
Обычное условие. Часто используется в подпрограммах.
Код ниже описывает подпрограмму, которая принимает аргумент boolean. Если
условие истинно, значение display элемента блочное, в противном случае —
flexbox.
$boolean: true !default;
/* создание подпрограммы */
@mixin display-type($boolean) {
@if $boolean == true {
display: block;
}
@else {
display: flex;
}
}
/* включаем наш mixin с аргументом, отличным от false, в класс .block-type */
.block-type {
@include display-type(false);
}
/* получаем в итоге */
.block-type {
display: flex;
}@each
Выручает, когда вы имеете дело с массивом. SASS будет использовать @list для
вычленения из него всех указанных элементов. В данном случае задача: менять аватары
авторов.
$list: (adam, john, wynn, mason, ivan);
.author-images {
@each $author in $list {
&--#{$author} {
background: image-url("#{$img}/#{$author}.png") no-repeat;
}
}
}
/* получаем в итоге */
.author-images--adam {
background: image-url("assets/images/adam.png") no-repeat;
}
.author-images--john {
background: image-url("assets/images/john.png") no-repeat;
}Ещё один пример: снова иконки. На этот раз они не безымянны и не бесцветны.
Изначально задаём нужные параметры (в примере цвет), а затем для каждой своё
название и соответствующий background. Обратите внимание на то, что массив
увеличился, теперь используются по два значения на итерацию.
/* цвета удобнее задать в одном месте */
$twi: #41b7d8;
$fb: #3b5997;
$gplus: #d64937;
/* массив $social со значениями: название и цвет */
$social: (twitter, $twi),
(facebook, $fb),
(googleplus, $gplus);
/* перебираем */
@each $socialnetwork, $color in $social {
.social-link--#{$socialnetwork} {
background-color: $color;
&:focus,
&:hover {
background-color: darken($color, 5%);
}
}
}
/* получаем в итоге */
.social-link--twitter {
background-color: #41b7d8;
}
.social-link--twitter:focus, .social-link--twitter:hover {
background-color: #2cafd4;
}@while
Для цикла @while нужны два параметра: переменная и шаг. Пока величина шага
удовлетворяет условию, происходит преобразование переменной. При каждой итерации
шаг увеличивается.
$color: #e44;
$step: 1;
@while $step <= 5 {
.palette-#{$step} {
background-image: linear-gradient(
to bottom,
darken($color, ($step * 2%)) 0%,
darken($color, ($step * 10%)) 100%
);
$step: $step + 1;
}
}
/* получаем в итоге */
.palette-1 {
background-image: linear-gradient(to bottom, #ed3b3b 0%, #ea1515 100%);
}
.palette-2 {
background-image: linear-gradient(to bottom, #ec3131 0%, #bb1111 100%);
}Надеюсь, этот небольшой экскурс будет кому-то полезен. Для более подробного ознакомления с особенностями SASS следует читать официальную документацию. Примеры там абстрактные, но это не помешает сообразить как их применить на практике.