Переменные в аргументах

Иногда имеет смысл миксину или функции принимать неизвестное количество аргументов. Например, миксин для создания тени блока может принимать любое количество значений тени. Для подобных ситуаций Sass поддерживает возможность передачи "переменных аргументов" - это такие аргументы, которые передаются последними в функцию или миксин, получают все остальные переданные параметры и упаковывают их в список. Эти аргументы выглядят как обычные, но после них следует многоточие. Например:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@mixin box-shadow($shadows...)
  -moz-box-shadow: $shadows
  -webkit-box-shadow: $shadows
  box-shadow: $shadows

.shadows
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999)

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Переменные аргументы также содержат любые именованные аргументы, переданные в функцию или миксин. К ним можно обратиться через функцию keywords($args), которая возвращает их как соответствие имён (без знака $) значениям.

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

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

@mixin colors($text, $background, $border)
  color: $text
  background-color: $background
  border-color: $border

$values: #ff0000, #00ff00, #0000ff
.primary
  @include colors($values...)

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000)
.secondary
  @include colors($value-map...)

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

Вы можете передать одновременно список параметров и карту значений, но только если список передаётся перед мапом, как в этом примере: @include colors($values..., $map...).

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

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  // Аргумент $width будет получен миксином "stylish-mixin" как именованный
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

@mixin wrapped-stylish-mixin($args...)
  font-weight: bold
  @include stylish-mixin($args...)

.stylish
  // Аргумент $width будет получен миксином "stylish-mixin" как именованный
  @include wrapped-stylish-mixin(#00ff00, $width: 100px)