Примеси

Примеси (или миксины, от англ. mixin) — одна из самых могучих штук в Sass и по своему действию напоминают функции в языках программирования. Иными словами, это фрагмент кода, который можно вставлять несколько раз. При этом примеси обладают рядом возможностей:

• в качестве значений можно передавать переменные, что придаёт примесям гибкость;
• существуют библиотеки примесей вроде Bourbon, в которых реализовано множество готовых типовых задач;
• примеси можно вынести в отдельный файл и подгружать их по мере необходимости через команду @import. Код при этом сокращается и упрощается.

Использование примесей

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

@mixin my_opacity {
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.block {
  height: 100px;
  background: #fc0;
}
.block:hover {
  opacity: 0.5;
  @include my_opacity;
}

На выходе получим следующий CSS.

.block {
  height: 100px;
  background: #fc0;
}
.block:hover {
  opacity: 0.5;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}

Переменные в примесях

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

В примере ниже мы создаём примесь с именем box, у которой три параметра с именами $width, $color и $bg. Для параметра $bg зададим также значение по умолчанию, тогда не придётся указывать его в обязательном порядке.

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

@mixin box($width, $color, $bg: #f0f0f0) {
  border: $width solid $color;
  padding: 20px;
  background: $bg;
}
.block {
  @include box(2px, #333);
}

На выходе мы получим следующий результат.

.block {
  border: 2px solid #333;
  padding: 20px;
  background: #f0f0f0;
}

Такого рода примеси удобно применять для вендорных свойств. Это свойства с префиксами -moz, -webkit, -ms работающие только в определённом браузере. Например, сделаем примесь, которая разбивает текст на заданное число колонок. Старые версии браузеров не понимают свойство columns, поэтому для них мы продублируем это свойство с префиксами, как показано ниже.

@mixin column($count, $width) {
  -webkit-columns: $count $width;
  -moz-columns: $count $width;
  columns: $count $width;
}
.page {
  @include column(2, 200px);
}

На выходе мы получим следующее.

.page {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
}

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

См. также

Основы Sass: команда mixin

http://www.sitepoint.com/sass-basics-the-mixin-directive/