@mixin и @include

Миксины позволяют вам определять стили, которые можно повторно использовать в вашей таблице стилей. Они позволяют легко избежать использования несемантических классов, таких как .float-left, и распределить коллекции стилей в библиотеках.

Миксины определяются с помощью at-правила @mixin, которое записывается как @mixin <name> { ... } или @mixin name(<arguments...>) { ... }. Имя миксина может быть любым идентификатором Sass, и оно может содержать любую конструкцию кроме конструкции верхнего уровня. Их можно использовать для инкапсуляции стилей, которые можно поместить в одно правило стиля; они могут содержать собственные правила стилей, которые могут быть вложены в другие правила или включены в верхний уровень таблицы стилей; или они могут просто служить для изменения переменных.

Миксины включаются в текущий контекст с помощью ат-правила @include, которое записывается @include <name> или @include <name>(<arguments...>), с именем миксина включены.

SCSS
Sass
CSS
SCSS Syntax@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}
Sass Syntax@mixin reset-list
  margin: 0
  padding: 0
  list-style: none


@mixin horizontal-list
  @include reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em




nav ul
  @include horizontal-list

CSS Outputnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

💡 Интересный факт:

Имена миксинов, как и все идентификаторы Sass, рассматривают дефисы и подчеркивания как идентичные. Это означает, что reset-list и reset_list относятся к одному и тому же миксину. Это историческое наследие самых ранних дней Sass, когда в именах идентификаторов разрешались только символы подчеркивания. После того, как Sass добавил поддержку дефисов в соответствии с синтаксисом CSS, они стали эквивалентными, чтобы упростить миграцию.

Аргументы permalinkАргументы

Миксины также могут принимать аргументы, что позволяет настраивать их поведение при каждом вызове. Аргументы указываются в правиле @mixin после имени миксина в виде списка имен переменных, заключенного в круглые скобки. Затем миксин должен быть включен с таким же количеством аргументов в форме выражений SassScript. Значения этих выражений доступны в теле миксина как соответствующие переменные.

SCSS
Sass
CSS
SCSS Syntax@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}
Sass Syntax@mixin rtl($property, $ltr-value, $rtl-value)
  #{$property}: $ltr-value

  [dir=rtl] &
    #{$property}: $rtl-value



.sidebar
  @include rtl(float, left, right)

CSS Output.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

💡 Интересный факт:

Списки аргументов также могут иметь конечные запятые! Это может помочь избежать синтаксических ошибок при рефакторинге таблиц стилей.

Необязательные аргументы permalinkНеобязательные аргументы

Обычно каждый аргумент, который объявляет миксин, должен быть передан, когда этот миксин включен. Однако вы можете сделать аргумент необязательным, указав значение по умолчанию, которое будет использоваться, если этот аргумент не передан. Значения по умолчанию используют тот же синтаксис, что и объявления переменных: имя переменной, за которым следует двоеточие и выражение SassScript. Это упрощает определение гибких API-интерфейсов миксинов, которые можно использовать как простыми, так и сложными способами.

SCSS
Sass
CSS
SCSS Syntax@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}
Sass Syntax@mixin replace-text($image, $x: 50%, $y: 50%)
  text-indent: -99999em
  overflow: hidden
  text-align: left

  background:
    image: $image
    repeat: no-repeat
    position: $x $y

.mail-icon
  @include replace-text(url("/images/mail.svg"), 0)



CSS Output.mail-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/mail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

💡 Интересный факт:

Значения по умолчанию могут быть любым выражением SassScript, и они могут даже ссылаться на более ранние аргументы!

Аргументы ключевых слов permalinkАргументы ключевых слов

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

SCSS
Sass
CSS
SCSS Syntax@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}
Sass Syntax@mixin square($size, $radius: 0)
  width: $size
  height: $size

  @if $radius != 0
    border-radius: $radius



.avatar
  @include square(100px, $radius: 4px)

CSS Output.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

⚠️ Внимание!

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

Принятие произвольных аргументов permalinkПринятие произвольных аргументов

Иногда для миксина полезно иметь возможность принимать любое количество аргументов. Если последний аргумент в объявлении @mixin оканчивается на ..., то все дополнительные аргументы в этот миксин передаются этому аргументу как список. Этот аргумент известен как список аргументов.

SCSS
Sass
CSS
SCSS Syntax@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");






Sass Syntax@mixin order($height, $selectors...)
  @for $i from 0 to length($selectors)
    #{nth($selectors, $i + 1)}
      position: absolute
      height: $height
      margin-top: $i * $height




@include order(150px, "input.name", "input.address", "input.zip")






CSS Outputinput.name {
  position: absolute;
  height: 150px;
  margin-top: 0px;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

Принятие произвольных аргументов ключевого слова permalinkПринятие произвольных аргументов ключевого слова

Списки аргументов также могут использоваться для получения аргументов произвольного ключевого слова. Функция meta.keywords() принимает список аргументов и возвращает любые дополнительные ключевые слова, которые были переданы миксину в виде карты от имен аргументов (не включая $) до значений этих аргументов.

SCSS
Sass
CSS
SCSS Syntax@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)
Sass Syntax@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)




CSS Outputpre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

💡 Интересный факт:

Если вы никогда не передаете список аргументов функции meta.keywords(), этот список аргументов не допускает дополнительных аргументов ключевого слова. Это помогает вызывающим абонентам вашего миксина быть уверенным, что они случайно не ошиблись в именах аргументов.

Передача произвольных аргументов permalinkПередача произвольных аргументов

Так же, как списки аргументов позволяют миксинам принимать произвольные позиционные или ключевые аргументы, тот же синтаксис может использоваться для передачи позиционных и ключевых аргументов миксину. Если вы передадите список, за которым следует ... в качестве последнего аргумента включения, его элементы будут рассматриваться как дополнительные позиционные аргументы. Точно так же карта, за которой следует ..., будет рассматриваться как дополнительные аргументы ключевого слова. Вы даже можете пройти оба сразу!

SCSS
Sass
SCSS Syntax$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);
Sass Syntax$form-selectors: "input.name", "input.address", "input.zip" !default

@include order(150px, $form-selectors...)

💡 Интересный факт:

Поскольку список аргументов отслеживает как позиционные, так и ключевые аргументы, вы используете его для передачи обоих одновременно другому миксину. Это упрощает определение псевдонима для миксина!

SCSS
Sass
SCSS Syntax@mixin btn($args...) {
  @warn "The btn() mixin is deprecated. Include button() instead.";
  @include button($args...);
}
Sass Syntax@mixin btn($args...)
  @warn "The btn() mixin is deprecated. Include button() instead."
  @include button($args...)

Блоки содержимого permalinkБлоки содержимого

Помимо аргументов, миксин может принимать целый блок стилей, известный как блок содержимого. Примесь может объявить, что принимает блок содержимого, включив в свое тело at-правило @content. Блок содержимого передается с использованием фигурных скобок, как и любой другой блок в Sass, и вводится вместо правила @content.

SCSS
Sass
CSS
SCSS Syntax@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}
Sass Syntax@mixin hover
  &:not([disabled]):hover
    @content



.button
  border: 1px solid black
  @include hover
    border-width: 2px


CSS Output.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}

💡 Интересный факт:

Примесь может включать в себя несколько at-правил @content. Если это так, блок содержимого будет включен отдельно для каждого @content.

⚠️ Внимание!

Блок содержимого имеет лексическую область видимости, что означает, что он может видеть только локальные переменные в области, в которую включен миксин. Он не видит никаких переменных, определенных в переданном ему миксине, даже если они определены до вызова блока содержимого.

Передача аргументов в блоки содержимого permalinkПередача аргументов в блоки содержимого

Dart Sass: since 1.15.0
LibSass: ✗
Ruby Sass: ✗

Миксин может передавать аргументы своему блоку содержимого так же, как он передает аргументы другому миксину, написав @content(<arguments...>). Пользователь, записывающий блок содержимого, может принимать аргументы, записывая @include <name> using (<arguments...>). Список аргументов для блока содержимого работает так же, как список аргументов миксина, а аргументы, переданные ему с помощью @content, работают так же, как передача аргументов миксину.

⚠️ Внимание!

Если миксин передает аргументы своему блоку содержимого, этот блок содержимого должен объявить, что он принимает эти аргументы. Это означает, что рекомендуется передавать аргументы только по позиции (а не по имени), и это означает, что передача большего количества аргументов является критическим изменением.

Если вы хотите гибко определять, какую информацию вы передаете в блок содержимого, подумайте о передаче ему карты, которая содержит информацию, которая может ему понадобиться!

SCSS
Sass
CSS
SCSS Syntax@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}
Sass Syntax@mixin media($types...)
  @each $type in $types
    @media #{$type}
      @content($type)




@include media(screen, print) using ($type)
  h1
    font-size: 40px
    @if $type == print
      font-family: Calluna



CSS Output@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

Синтаксис миксин с отступом permalinkСинтаксис миксин с отступом

Синтаксис с отступом имеет специальный синтаксис для определения и использования миксинов в дополнение к стандартным @mixin и @include. Миксины определяются с помощью символа = и подключаются с помощью +. Хотя этот синтаксис короче, его труднее понять с первого взгляда, и пользователям рекомендуется избегать его.

Sass
CSS
Sass Syntax=reset-list
  margin: 0
  padding: 0
  list-style: none

=horizontal-list
  +reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em

nav ul
  +horizontal-list
CSS Outputnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}