@function

Функции определяются с помощью at-правила @function, которое записывается как @function <name>(<arguments...>) { ... }. Имя функции может быть любым идентификатором Sass. Он может содержать только универсальные конструкции, а также at-правило @return, которое указывает значение, используемое в результате вызова функции. Функции вызываются с использованием обычного синтаксиса функций CSS.

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result


.sidebar
  float: left
  margin-left: pow(4, 3) * 1px

.sidebar {
  float: left;
  margin-left: 64px;
}

Аргументы permalinkАргументы

Аргументы позволяют настраивать поведение функций при каждом их вызове. Аргументы указываются в правиле @function после имени функции в виде списка имен переменных, заключенного в круглые скобки. Функция должна вызываться с таким же количеством аргументов в виде выражений SassScript. Значения этих выражений доступны в теле функции как соответствующие переменные.

Необязательные аргументы permalinkНеобязательные аргументы

Обычно каждый аргумент, который объявляет функция, должен быть передан при включении этой функции. Однако вы можете сделать аргумент необязательным, указав значение по умолчанию, которое будет использоваться, если эти аргументы не переданы. Значения по умолчанию используют тот же синтаксис, что и объявления переменных: имя переменной, за которым следует двоеточие и выражение SassScript. Это упрощает определение гибких API-интерфейсов unction, которые можно использовать как простыми, так и сложными способами.

@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
  background-color: invert($primary-color, 80%);
}

@function invert($color, $amount: 100%)
  $inverse: change-color($color, $hue: hue($color) + 180)
  @return mix($inverse, $color, $amount)


$primary-color: #036
.header
  background-color: invert($primary-color, 80%)

.header {
  background-color: #523314;
}

Аргументы ключевых слов permalinkАргументы ключевых слов

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

$primary-color: #036;
.banner {
  background-color: $primary-color;
  color: scale-color($primary-color, $lightness: +40%);
}

$primary-color: #036
.banner
  background-color: $primary-color
  color: scale-color($primary-color, $lightness: +40%)

.banner {
  background-color: #036;
  color: #0a85ff;
}

Принятие произвольных аргументов permalinkПринятие произвольных аргументов

Иногда полезно, чтобы функция могла принимать любое количество аргументов. Если последний аргумент в объявлении @function заканчивается на ..., то все дополнительные аргументы этой функции передаются этому аргументу как список. Этот аргумент известен как список аргументов.

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

@function sum($numbers...)
  $sum: 0
  @each $number in $numbers
    $sum: $sum + $number

  @return $sum


.micro
  width: sum(50px, 30px, 100px)

.micro {
  width: 180px;
}

Принятие произвольных аргументов ключевого слова permalinkПринятие произвольных аргументов ключевого слова

Списки аргументов также могут использоваться для получения аргументов произвольного ключевого слова. Функция meta.keywords() принимает список аргументов и возвращает любые дополнительные ключевые слова, которые были переданы функции в виде карты от имен аргументов (не включая $) до значений этих аргументов.

Передача произвольных аргументов permalinkПередача произвольных аргументов

Так же, как списки аргументов позволяют функциям принимать произвольные позиционные аргументы или аргументы ключевого слова, тот же синтаксис может использоваться для передачи позиционных аргументов и аргументов ключевого слова функции. Если вы передадите список, за которым следует ... в качестве последнего аргумента вызова функции, его элементы будут рассматриваться как дополнительные позиционные аргументы. Точно так же карта, за которой следует ..., будет рассматриваться как дополнительные аргументы ключевого слова. Вы даже можете пройти оба сразу!

$widths: 50px, 30px, 100px;
.micro {
  width: min($widths...);
}

$widths: 50px, 30px, 100px
.micro
  width: min($widths...)

.micro {
  width: 30px;
}

@function fg($args...) {
  @warn "The fg() function is deprecated. Call foreground() instead.";
  @return foreground($args...);
}

@function fg($args...)
  @warn "The fg() function is deprecated. Call foreground() instead."
  @return foreground($args...)

@return permalink@return

At-правило @return указывает значение, используемое в результате вызова функции. Это разрешено только внутри тела @function, и каждая @function должна оканчиваться на @return.

Когда встречается @return , он немедленно завершает функцию и возвращает ее результат. Ранний возврат может быть полезен для обработки крайних случаев или случаев, когда доступен более эффективный алгоритм без обертывания всей функции в блоке @else block.

@use "sass:string";

@function str-insert($string, $insert, $index) {
  // Избегайте создания новых строк, если нам это не нужно.
  @if string.length($string) == 0 {
    @return $insert;
  }

  $before: string.slice($string, 0, $index);
  $after: string.slice($string, $index);
  @return $before + $insert + $after;
}

@use "sass:string"

@function str-insert($string, $insert, $index)
  // Избегайте создания новых строк, если нам это не нужно.
  @if string.length($string) == 0
    @return $insert


  $before: string.slice($string, 0, $index)
  $after: string.slice($string, $index)
  @return $before + $insert + $after

Прочие функции permalinkПрочие функции

Помимо пользовательских функций, Sass предоставляет обширную базовую библиотеку встроенных функций, которые всегда доступны для использования. Реализации Sass также позволяют определять пользовательские функции на основном языке. И, конечно же, вы всегда можете вызвать простые функции CSS (даже те, которые имеют странный синтаксис).

Простые функции CSS permalinkПростые функции CSS

Любой вызов функции, который не является ни определяемой пользователем, ни встроенной функцией, компилируется в обычную функцию CSS (если только он не использует синтаксис аргументов Sass). Аргументы будут скомпилированы в CSS и включены в вызов функции как есть. Это гарантирует, что Sass поддерживает все функции CSS без необходимости выпускать новые версии каждый раз, когда добавляется новая.

@debug var(--main-bg-color); // var(--main-bg-color)

$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)

@debug var(--main-bg-color)  // var(--main-bg-color)

$primary: #f2ece4
$accent: #e1d7d2
@debug radial-gradient($primary, $accent)  // radial-gradient(#f2ece4, #e1d7d2)