Миксины вызываются в документ директивой @include. Она принимает имя миксина и, опционально, передаваемые в него аргументы, включает стили, определённые этим миксином, в текущее правило. Например:

.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;

компилируется в

a {
  color: blue;
  background-color: red; }

Миксины также могут включать в себя другие миксины. Например:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

Миксины могут включать самих себя. Этим современный Sass отличается от версий, предшествующих 3.3, где рекурсия в миксинах была запрещена.

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


На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.