Основы Sass. Миксины
HTML&CSS

Основы Sass. Миксины

Оригинал: Sass Basics: The Mixin Directive, Reggie Dawson

Для меня Sass был настоящим открытием. Долгое время я мучался написанием чистого, или “vanilla” CSS. В случаях с маленькими сайтами все было прекрасно, но на больших проектах CSS быстро отбивается от рук. Отладка превращается в настоящий ночной кошмар.

Я познакомился с Sass и все изменилось. С Sass я мог разбить CSS на модули, чтобы упростить поиск проблем. Я мог использовать такие концепции программирования, как функции и переменные. А самое важное, я познакомился с миксинами.

Что такое миксины?

Миксины позволяют создавать переиспользуемые блоки CSS. Это помогает избежать дублирования кода. Например:


a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }
С использованием миксина Sass вы можете создать ссылки так:

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

Как подключить миксин

Чтобы использовать миксин, его необходимо подключить в Sass файле. Чтобы подключить миксин для ссылок из примера выше, добавьте следующую строку:


@include linx(white, blue, green, red);

Как создать миксин

Создать миксин можно с помощью директивы @mixin. Например:


@mixin sample {
    font-size: 12px;
}

После директивы @mixin должно быть указано название миксина. Можно добавить в миксин аргументы, как, например, мы сделали в миксине выше.

Переменные, определенные где-либо в Sass файле, можно использовать в миксине. Допустим, мы хотим использовать в миксине переменную $font-base.


$font-base: 12px;

@mixin sample {
    font-size: $font-base;
}

p {
    @include sample;
}

Результирующий CSS:


p {
    font-size: 12px;
}

Миксин также может принимать значения в качестве аргументов. Эти значения объявляются при создании миксина и передаются при вызове. Аргументы представляют собой собой разделенный запятыми список переменных в круглых скобках.


@mixin headline ($color, $size) {
    color: $color;
    font-size: $size;
}

h1 {
    @include headline(green, 12px);
}

Пример выше будет скомпилирован в следующий код:


h1 {
    color: green;   
    font-size: 12px;
}

Аргументы должны передаваться в миксин в том же порядке, в котором они были объявлены. Если мы попробуем поменять порядок аргументов в примере выше, получим:


h1 {
    @include headline(12px, green);
}

h1 {
    color: 12px;
    font-size: green;
}

Как вы можете видеть, это не работает. В качестве аргументов можно передавать переменные Sass. Например, можно передать переменную $base-color в пример выше:


$base-color: pink;

@mixin headline($color, $size) {
    color: $color;
    font-size: $size;
}

h1 { @include headline($base-color, 12px);}

Пример будет скомпилирован в следующий код:


h1 {
    color: pink;
    font-size: 12px;
}

Значения по умолчанию

При создании миксина можно указать значения по умолчанию для аргументов. Если для аргумента определено значение по умолчанию, то значение соответствующего аргумента при вызове миксина можно пропустить. Вместо него будет использовано значение по умолчанию. Например, я могу обновить миксин headline в примере выше.


@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(12px);
}

h1 {
  @include headline(12px, blue);
}

Будет скомпилировано в:


h1 {
  color: red;
  font-size: 12px;
}
h1 {
  color: blue;
  font-size: 12px;
}

Для первого h1 мы передали размер шрифта, и использовали значение по умолчанию для цвета. Во втором примере, значение по умолчанию будет заменено на переданный в директиве @include аргумент. Обратите внимание, что обязательные аргументы должны идти первыми. Также в качестве значения по умолчанию можно использовать переменную.


$base-color: orange;

@mixin headline($size, $color: $base-color) {
  color: $color;
  font-size: $size;
}

Имена аргументов

При передаче параметров в миксин можно указывать их имена. Не смотря на то, что это делает код менее лаконичным, это улучшает читаемость, что очень важно, особенно если кто-то будет поддерживать код, который вы написали. Также в этом случае можно передавать параметры в любом порядке, и, конечно, значения по умолчанию могут быть пропущены.


@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline($color: blue, $size: 12px);
}

Этот пример будет успешно скомпилирован:


h1 {
  color: blue;
  font-size: 12px;
}

Переменные аргументы

Иногда может потребоваться передать в миксин неопределенное число параметров. Например, свойство padding может иметь от одного до четырех параметров. В этой ситуации в миксине можно использовать переменные аргументы. Переменные аргументы позволяют передавать в миксин произвольное число параметров в виде списка. Выглядят они как обычные параметры с добавлением многоточия (...) в конце.


@mixin pad ($pads...) {
  padding: $pads;
}

.one {
  @include pad(20px);
}
.two {
  @include pad(10px 20px);
}
.three {
  @include pad(10px 20px 40px);
}
.four {
  @include pad(10px 20px 30px 20px);
}

Будет скомпилировано в:


.one {
  padding: 20px;
}
.two {
  padding: 10px 20px;
}
.three {
  padding: 10px 20px 40px;
}
.four {
  padding: 10px 20px 30px 20px;
}

Вместе с переменными аргументами можно передавать и обычные. Например, в миксине pad мы хотим задать еще и цвет в миксине:


@mixin pad ($color,$pads...) {
  color: $color;
  padding: $pads;
}
.four { @include pad(orange, 10px 20px 30px 20px); }

Будет сгенерировано:


.four {
  color: orange;
  padding: 10px 20px 30px 20px;
}

Обычные аргументы должны идти перед переменными. Переменные аргументы можно использовать и при вызове миксина — передавать значения параметров в виде списка или объекта.


$box-style1: 5px, solid, red;
$box-style2: (bStyle: dotted, bColor: blue, bWidth: medium);

@mixin boxy($bWidth, $bStyle, $bColor) {
  border-width: $bWidth;
  border-style: $bStyle;
  border-color: $bColor;
}

.first {
  @include boxy($box-style1...);
}

.second {
  @include boxy($box-style2...);
}

.first {
  border-width: 5px;
  border-style: solid;
  border-color: red;
}

.second {
  border-width: medium;
  border-style: dotted;
  border-color: blue;
}

@content

В миксин можно передать блок правил с помощью директивы @content. В скомпилированном коде директива @content будет заменена на этот блок правил.


@mixin cont {
  background-color: black;
  color: white;
  @content;
}

Теперь при вызове миксина мы можем передать дополнительные стили:


div {
  @include cont {
      font-size: 12px;
      font-style: italic;
  }
}

div {
  background-color: black;
  color: white;
  font-size: 12px;
  font-style: italic;
}

Заключение

Как вы видите, миксины в Sass очень полезны. Их использование может значительно ускорить рабочий процесс. Больше информации о том, как использовать миксины и Sass в целом, можно посмотреть на сайте sass-lang.com.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться