Примеси
Примеси (или миксины, от англ. 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
На выходе получим следующий CSS.
.block < height: 100px; background: #fc0; >.block:hover
Переменные в примесях
Примеси хороши уже сами по себе, поскольку оптимизируют стилевой код. Но часто требуется вызывать несколько раз похожий фрагмент кода, который различается лишь одним-двумя значениями. Тогда нам опять помогут примеси, потому что они могут включать в себя параметры, а их значения подставляются в заданных местах кода. Получается, что написав один раз примесь, мы можем вызывать её неоднократно, лишь меняя значения параметров.
В примере ниже мы создаём примесь с именем box, у которой три параметра с именами $width, $color и $bg. Для параметра $bg зададим также значение по умолчанию, тогда не придётся указывать его в обязательном порядке.
Далее к селектору добавляем примесь через команду @include . Внутри скобок пишем желаемые значения, их может быть три или два, ведь цвет фона задан по умолчанию.
@mixin box($width, $color, $bg: #f0f0f0) < border: $width solid $color; padding: 20px; background: $bg; >.block
На выходе мы получим следующий результат.
.block
Такого рода примеси удобно применять для вендорных свойств. Это свойства с префиксами -moz, -webkit, -ms работающие только в определённом браузере. Например, сделаем примесь, которая разбивает текст на заданное число колонок. Старые версии браузеров не понимают свойство columns , поэтому для них мы продублируем это свойство с префиксами, как показано ниже.
@mixin column($count, $width) < -webkit-columns: $count $width; -moz-columns: $count $width; columns: $count $width; >.page
На выходе мы получим следующее.
.page
Как видно, примеси позволяют хранить повторяющийся код в одном месте, легко редактировать его и при желании изменять параметры.
См. также
Основы Sass: команда mixin
Использование миксина
Миксины вызываются в документ директивой @include. Она принимает имя миксина и, опционально, передаваемые в него аргументы, включает стили, определённые этим миксином, в текущее правило. Например:
.page-title @include large-text; padding: 4px; margin-top: 10px; > .page-title @include large-text padding: 4px margin-top: 10px .page-title font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; > Миксины могут быть также вызваны вне какого-либо правила (то есть в корне документа), при условии, что они не определяют непосредственно правил и не используют ссылку на родителя. Например:
@mixin silly-links a color: blue; background-color: red; > > @include silly-links; @mixin silly-links a color: blue background-color: red @include silly-links a color: blue; background-color: red; > Миксины
Миксины (часто используется название примеси) позволяют определить стили, которые могут быть использованы повторно в любом месте документа без необходимости прибегать к несемантическим классам вроде .float-left. Миксины также могут содержать целые CSS правила или что-либо другое, разрешённое в Sass документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
Урок #4 — Использование миксинов
Для сокращения кода в SASS используются специальные шаблоны со свойствами — миксины. В ходе урока вы научитесь создавать миксины, передавать в них параметры, а также использовать их для различных объектов.
Видеоурок
Миксины в SASS выполняют роль шаблона данных, который можно подключить к блоку, тем самым добавив в него множество стилей из шаблона.
Для создания миксина используйте ключевое слово @mixin :
@mixin someName < // Здесь код и различные стили >Миксины не срабатывают без явного подключения, поэтому сейчас в файле CSS ничего не поменяется. Для подключения миксина используйте ключевое слово @include .
#block
Также в миксины можно передавать параметры. Для этого после имени миксина пропишите круглые скобки ( ) , после чего в них пропишите параметры, которые будут переданы в него.