Иногда имеет смысл миксину или функции принимать неизвестное количество аргументов. Например, миксин для создания тени блока может принимать любое количество значений тени. Для подобных ситуаций 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);
}

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

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

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

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


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