sass
Примеси

Синтаксис

• @mixin mixin-name ($argument1, $argument, ...){ ... }

Создание и использование микширования

Чтобы создать mixin, используйте директиву @mixin .

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Вы можете указать список аргументов внутри скобок после имени mixin. Не забудьте запустить переменные с помощью $ и разделить их запятыми.

Чтобы использовать mixin в другом селекторе, используйте директиву @include .

footer, header{ @include default-box (#ddd, #ccc); }

Теперь стили из mixin будут использоваться в footer и header со значением #ccc для переменной $color и #ddd для переменной $borderColor .

Mixin с переменным аргументом

Есть несколько случаев в mixins, где во время использования могут быть одиночные или множественные аргументы. Возьмем случай border-radius где может быть один аргумент, такой как border-radius:4px; или несколько аргументов, таких как border-radius:4px 3px 2px 1px; ,

Традиционный с аргументами Keyword Аргументы будут выглядеть следующим образом:

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

И используется как

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

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

Используя переменную Аргумент, вам не нужно беспокоиться о том, сколько аргументов вы можете передать. Переменные аргументы могут быть объявлены путем определения имени переменной, за которым следуют три точки (...) . Ниже приведен пример переменного аргумента.

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

И используется как

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

Вышеприведенный пример намного проще (для кодирования, поддержки и чтения), вам не нужно беспокоиться о том, сколько аргументов придет - это один или несколько .

Если имеется более одного аргумента, и в любом случае вы хотите получить доступ ко второму аргументу, вы можете сделать это, записав имя propertyname : nth(variable_name, 2) .

Разумные значения по умолчанию

SASS дает вам возможность опускать любой параметр, кроме тех, которые вы хотите переписать, конечно. Давайте снова возьмем пример по default-box :

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Здесь мы теперь будем называть mixin, перезаписав второй параметр

footer, header{ @include default-box ($borderColor: #ccc); }

значение $borderColor равно #ccc , тогда как $color остается red

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

Необязательные аргументы SASS позволяют использовать параметр, только если вы укажете его значение; в противном случае он будет проигнорирован. Возьмем пример следующего mixin:

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

Поэтому призыв к

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

просто выведет в файле CSS следующее:

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS не выводит свойства с null значением, что очень полезно, когда нам нужно включить необязательный аргумент в наш вызов или нет.

Директива @content

Mixins может быть передан блок SASS-совместимого кода, который затем становится доступным в mixin как директива @content .

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

И это будет выводить:

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

Mixins могут использовать директиву @content и все еще принимать параметры.

@mixin small-screen($offset) {...