Примеси в Sass

Когда вам надоедает писать один и тот же код снова и снова, то вам помогут примеси Sass.

Примеси являются функциями CSS, которые можно включать где вы пожелаете.

Синтаксис

Помните, как мы пишем @keyframes при создании CSS-анимации? Синтаксис примеси очень похож:

@mixin overlay() {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Именем этой примеси является overlay. Вы можете ссылаться на эту примесь в любом правиле CSS с помощью @include:

.modal-background {
  @include overlay();
  background: black;
  opacity: 0.9;
}

Как обычно, этот .scss будет скомпилирован в .css:

.modal-background {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: black;
  opacity: 0.9;
}

Повторное использование

Основная цель примесей — повторное использование набора свойств.

Подобно переменным Sass (когда вы определяете ваши значения в одном месте), примеси позволяют определить в одном месте свойства.

Предыдущая примесь может быть повторно использована в других правилах:

.modal-background {
  @include overlay();
}
  
.product-link {
  @include overlay();
}

.image-pattern {
  @include overlay();
}

CSS

.modal-background {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
  
.product-link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
  
.image-pattern {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Параметры

Поскольку примеси являются функциями и вы можете изменить вывод, то примеси могут принимать параметры.

К примеру, эта примесь border-radius позволяет не писать вендорные префиксы и принимает фактическое значение радиуса в качестве параметра:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
  
.box{
  @include border-radius(3px);
}

CSS

.box{
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
      -ms-border-radius: 3px;
          border-radius: 3px;
}

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

Дополнительные параметры

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

@mixin label($text: "Код", $background: $yellow, $color: rgba(black, 0.5)) {
  position: relative;
  &:before {
    background: $background;
    color: $color;
    content: $text;
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    height: 1rem;
    left: 0;
    letter-spacing: 0.1em;
    line-height: 1rem;
    padding: 0 0.5em;
    position: absolute;
    text-transform: uppercase;
    top: 0;
  }
}

Эта примесь добавляет метки в левом верхнем углу фрагментов кода. У неё три дополнительных параметра, каждый из них со своим собственным значением по умолчанию, заданным через двоеточие.

Эта примесь используется несколько раз в коде:

div.highlighter-rouge {
  @include label();
  &.css {
    @include label("CSS", $blue, white);
  }
  &.scss {
    @include label("SCSS", #c69, white);
  }
}

div.highlighter-rouge будет использовать значения по умолчанию: