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

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

scss
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

.page-title
  @include large-text
  padding: 4px
  margin-top: 10px
css
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

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

scss
@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

@mixin silly-links
  a
    color: blue
    background-color: red

@include silly-links
css
a {
  color: blue;
  background-color: red; 
}

Предыдущая страница

Объявление миксина

Следующая страница

Аргументы

Ваша 
Поддержка