Управляющие конструкции SASS

Управляющие конструкции препроцессоров — основа, позволяющая сократить исходный код в несколько раз и сделать возможным написание собственного 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 следует читать официальную документацию. Примеры там абстрактные, но это не помешает сообразить как их применить на практике.