SitePoint предлагает всем своим Премиум-участникам Jump Start Sass суперзвезду Sass Уго Жирауделя для полного, но лаконичного погружения в Sass. Кроме того, вы можете получить копию всего за 19 долларов.
Эта статья впервые появилась в SitePoint в 2015 году и переиздана 14 июня 2017 года после ряда небольших исправлений и исправлений.
Для меня нахождение Sass было откровением. Долгое время мне надоело писать простой или «ванильный» CSS. Для небольших сайтов это было хорошо, но для больших сайтов CSS быстро вышел из-под контроля. Отладка была кошмаром, и я не мог не чувствовать, что могу сделать больше с моим CSS.
Я нашел Sass, и все изменилось. С помощью Sass я мог разбить свой CSS на модульные блоки, чтобы упростить поиск неисправностей. Я мог бы также использовать концепции программирования, такие как функции и переменные, при создании моего CSS. И самое главное, Sass познакомил меня с Mixins.
Что такое Sass Mixin?
Миксин позволяет создавать фрагменты 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 Mixin
Чтобы использовать миксин, вы должны включить его в свои файлы Sass. Чтобы вызвать linx mixin сверху, вы должны добавить эту строку:
@include linx(white, blue, green, red);
Директива @include позволяет использовать миксины в файлах Sass.
Как создать Sass Mixin
Для создания миксина вы используете директиву @mixin . Например:
@mixin sample { font-size: 12px; }
Вы определяете эту директиву, используя @mixin за которым следует имя mixin. Вы также можете при желании включить аргументы в свой миксин, как вы это сделали с миксином linx выше.
Вы также можете использовать переменные в своем миксине, которые определены в других местах ваших файлов Sass. Допустим, вы хотели использовать $font-base в качестве переменной в своем миксине. Пока переменная была определена, вы можете использовать ее в своем миксине:
$font-base: 12px; @mixin sample { font-size: $font-base; } p { @include sample; }
Полученный CSS:
p { font-size: 12px; }
Аргументы в Sass Mixins
Миксин может принимать значения данных Sass в качестве аргументов. Эти значения указываются при определении миксина и задаются конкретным значением при @include . Затем аргументы передаются в mixin как переменные. Аргументы включаются в список через запятую, заключенный в скобки после имени миксина:
@mixin headline ($color, $size) { color: $color; font-size: $size; } h1 { @include headline(green, 12px); }
Это скомпилируется в:
h1 { color: green; font-size: 12px; }
При использовании базовых аргументов они должны вызываться в порядке, указанном в mixin. В последнем примере, если вы включили порядок аргументов при включении миксина, скомпилированный CSS не будет действительным:
h1 { @include headline(12px, green); } h1 { color: 12px; font-size: green; }
Как видите, миксин просто доставляет аргументы в указанном порядке, что не дает ожидаемого кода CSS.
Вы также можете передавать переменные 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; }
Значения по умолчанию в Sass Mixins
При создании вашего миксина вы можете указать значения по умолчанию в качестве аргументов. Когда вы включаете значение по умолчанию, вы можете пропустить передачу этого значения при вызове вашего миксина, потому что Sass будет использовать значение по умолчанию. Например, если вы обновите заголовок mixin сверху со значением по умолчанию, как показано в коде ниже:
@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 . Обратите внимание, что вам пришлось изменить порядок аргументов, так как Sass хочет сначала указать требуемые аргументы. Поскольку аргумент $color имеет значение по умолчанию, указывать цвет в @include необязательно. Вы также можете указать переменную в качестве значения по умолчанию:
$base-color: orange; @mixin headline($size, $color: $base-color) { color: $color; font-size: $size; }
Аргументы по ключевым словам в Sass Mixins
У вас также есть возможность включить ваш миксин с ключевыми словами. Даже если использование аргументов ключевых слов может сделать ваш код менее лаконичным, это улучшит читабельность, что важно, если кто-то другой будет поддерживать написанный вами код. Вы можете включать ключевые аргументы в любом порядке, и, конечно, значения по умолчанию могут быть опущены:
@mixin headline($size, $color: red) { color: $color; font-size: $size; } h1 { @include headline($color: blue, $size: 12px); }
Это прекрасно компилируется, даже если аргументы находятся в неправильном порядке.
h1 { color: blue; font-size: 12px; }
Переменные аргументы в Sass Mixins
Иногда вам может понадобиться ваш миксин, чтобы принять ряд аргументов. Например, свойство padding может иметь от одного до четырех аргументов. В этой ситуации вы можете создать миксин, который использует переменные аргументы. Переменные аргументы позволяют упаковывать аргументы в виде списка. Аргументы переменных выглядят как обычные аргументы для mixin, за исключением того, что они добавляют (…) в конце:
@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; }
Вы также можете включить обычные аргументы рядом с переменными аргументами. Допустим, вы хотите установить цвет текста в своем пэде mixin:
@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...); }
Как видите, у вас есть список и карта для использования в вашем миксине. При использовании списка аргументы должны быть в правильном порядке. При использовании карты порядок не имеет значения, поскольку значения карты будут обрабатываться как аргументы ключевых слов. Как видите, значения карты расположены в неправильном порядке, но вы все равно получаете правильный код CSS:
.first { border-width: 5px; border-style: solid; border-color: red; } .second { border-width: medium; border-style: dotted; border-color: blue; }
@content
С @content директивы @content вы также можете передать блок стилей, не определенных в mixin. Эти дополнительные стили появятся в миксине, где вы размещаете @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; }
Как видите, font-size font-style добавленные выше, были включены в скомпилированный код CSS, относящийся к элементу div. Директива @content позволяет вам @content базовые стили и настраивать их по мере необходимости.
Вывод
Как видите, миксины могут быть очень полезны в вашем Sass. С помощью миксинов можно сделать так много, чтобы ускорить рабочий процесс. Для получения дополнительной информации о Sass mixins посмотрите Sass: Mixin или Placeholder? Уго Жираудель и Sass Docs .
Какие твои любимые миксы Sass? Пожалуйста, поделитесь ими в комментариях.