Теория: Миксины

Важным оружием препроцессора SASS являются миксины. Также они ещё называются примеси. Это повторяющиеся участки кода, которые можно включать в различные селекторы. Звучит как шаблонные селекторы, правда? В своём базовом виде всё так и есть, но миксины имеют куда больше возможностей.

Для начала разберёмся с переиспользованием стилей. Создадим базовый миксин сброса стилей.

Чтобы создать миксин, необходимо указать ключевое слово @mixin и дать ему уникальное имя. Внутри этого миксина просто записываются все необходимые правила.

@mixin reset {
  margin: 0;
  padding: 0;
}

Для включения миксина в селектор используется ключевое слово @include после чего указывается имя миксина, который мы хотим подключить. Для примера сбросим отступы в маркированном списке.

@mixin reset {
  margin: 0;
  padding: 0;
}

ul {
  @include reset;
}

После компиляции мы получим следующий CSS-код:

ul {
  margin: 0;
  padding: 0;
}

Миксины также возможно включать друг в друга, что позволяет на основе имеющегося миксина делать новый.

@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

@mixin reset {
  margin: 0;
  padding: 0;
}

@mixin horizontal-menu {
  @include reset;
  @include flex-between;

  list-style: none;

  .menu-item {
    margin: 0 10px;
  }
}

.menu {
  &.horizontal-menu {
    @include horizontal-menu;
  }
}

Обратите внимание, что внутри миксина horizontal-menu мы подключили два вышестоящих миксина и потом использовали его для стилизации нашего меню. Все стили из миксинов flex-between и reset окажутся внутри миксина horizontal-menu. Конечный CSS-код будет выглядеть следующим образом:

.menu.horizontal-menu {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.menu.horizontal-menu .menu-item {
  margin: 0 10px;
}

Препроцессор работает последовательно, поэтому порядок включения миксинов может иметь значение в некоторых случаях. Не забывайте следить за этим. А также не забывайте следить за уровнем вложенности миксинов. Хоть SASS и позволяет включать миксины друг в друга, но не советую делать это на большой глубине. Чем больше уровней включений миксинов, тем меньше контроля мы имеем за стилями. Миксины в первую очередь предназначены для облегчения написания повторного CSS-кода. Если вы чувствуете, что у вас появилась глубокая вложенность, то остановитесь, выдохните и подумайте — возможно некоторые стили стоит использовать без миксинов.

Миксины часто используются для свойств, которым необходима поддержка в старых браузерах. Для таких свойств указываются вендорные префиксы. Если мы используем свойство box-shadow и нам необходима поддержка старых браузеров, таких как Firefox 3.5, Chrome 9, Safari 4.3, то мы должны использовать вендорные префиксы -moz- и -webkit-. Для такого кода мы можем использовать миксины.

@mixin box-shadow-prefix {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.box-shadow {
  @include box-shadow-prefix;
}