Встроенные модули

Dart Sass: с версии 1.23.0
LibSass: ✗
Ruby Sass: ✗

Только Dart Sass в настоящее время поддерживает загрузку встроенных модулей с помощью @use. Пользователям других реализаций необходимо вызывать функции с использованием их глобальных имён.

Sass предоставляет множество встроенных модулей, содержащих полезные функции (и иногда миксины). Эти модули можно загружать с помощью правила @use, как и любые пользовательские таблицы стилей, и вызывать их функции, как любые другие члены модуля. Все URL встроенных модулей начинаются с sass:, чтобы указать, что они являются частью самого Sass.

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

Несколько функций доступны только глобально даже в новой системе модулей, либо из-за специального поведения вычисления (if()), либо из-за добавления дополнительного поведения поверх встроенных функций CSS (rgb() и hsl()). Эти функции не будут устаревать и могут свободно использоваться.

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}
// SASS
@use "sass:color"

.button
  $primary-color: #6b717f
  color: $primary-color
  border: 1px solid color.scale($primary-color, $lightness: 20%)
/* CSS */
.button {
  color: #6b717f;
  border: 1px solid rgb(135.1641025641, 140.8256410256, 154.0358974359);
}

Sass предоставляет следующие встроенные модули:

Модуль sass:math предоставляет функции, работающие с числами.
Модуль sass:string упрощает объединение, поиск или разделение строк.
Модуль sass:color генерирует новые цвета на основе существующих, упрощая создание цветовых схем.
Модуль sass:list позволяет получать доступ к значениям и изменять их в списках.
Модуль sass:map позволяет искать значение, связанное с ключом в словаре, и многое другое.
Модуль sass:selector предоставляет доступ к мощному механизму селекторов Sass.
Модуль sass:meta раскрывает детали внутренней работы Sass.

Глобальные функции

💡 Интересный факт:

Вы можете передать специальные функции, такие как calc() или var(), вместо любого аргумента в глобальный конструктор цвета. Вы даже можете использовать var() вместо нескольких аргументов, так как он может быть заменён несколькими значениями! Когда функция цвета вызывается таким образом, она возвращает необрамённую строку, используя тот же синтаксис, с которым она была вызвана.

@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))
// SASS
@debug rgb(0 51 102 / var(--opacity))  // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach))  // color(display-p3 var(--peach))

color($space $channel1 $channel2 $channel3)
color($space $channel1 $channel2 $channel3 / $alpha) //=> color

Dart Sass: с версии 1.78.0
LibSass: ✗
Ruby Sass: ✗

Возвращает цвет в заданном цветовом пространстве со значениями каналов.

Это поддерживает цветовые пространства srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz и xyz-d50, а также xyz-d65, который является псевдонимом для xyz. Для всех пространств каналы представляют собой числа от 0 до 1 (включительно) или проценты от 0% до 100% (включительно).

Если любой цветовой канал находится за пределами диапазона от 0 до 1, это означает цвет за пределами стандартного диапазона для данного цветового пространства.

@debug color(srgb 0.1 0.6 1); // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%); // color(xyz 0.3 0 0.9 / 50%)
// SASS
@debug color(srgb 0.1 0.6 1)  // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%)  // color(xyz 0.3 0 0.9 / 50%)

hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color

Dart Sass: с версии 1.15.0
LibSass: ✗
Ruby Sass: ✗

LibSass и Ruby Sass поддерживают только следующие синтаксисы:

hsl($hue, $saturation, $lightness)
hsla($hue, $saturation, $lightness, $alpha)

Обратите внимание, что для этих реализаций аргумент $alpha является обязательным, если используется имя функции hsla(), и запрещённым, если используется имя функции hsl().

Dart Sass: ✓
LibSass: ✗
Ruby Sass: с версии 3.7.0

LibSass и более старые версии Ruby Sass не поддерживают значения альфа в процентах.

Возвращает цвет с заданными цветовым тоном, насыщенностью и светлотой и заданным каналом альфа.

Цветовой тон — число от 0deg до 360deg (включительно) и может быть безразмерным. Насыщенность и светлота обычно представляют собой числа от 0% до 100% (включительно) и не могут быть безразмерными. Канал альфа может быть указан как безразмерное число от 0 до 1 (включительно) или процент от 0% до 100% (включительно).

Цветовой тон, выходящий за пределы 0deg и 360deg, эквивалентен $hue % 360deg. Насыщенность меньше 0% ограничена до 0%. Насыщенность выше 100% или светлота за пределами 0% и 100% допускаются и представляют цвета, находящиеся за пределами стандартного диапазона RGB.

Специальные правила разбора Sass для значений, разделённых слэшем, затрудняют передачу переменных для $lightness или $alpha при использовании синтаксиса hsl($hue $saturation $lightness / $alpha). Рассмотрите использование hsl($hue, $saturation, $lightness, $alpha) вместо этого.

@debug hsl(210deg 100% 20%); // #036
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(241.74, 235.552, 227.46, 0.2)
// SASS
@debug hsl(210deg 100% 20%) // #036
@debug hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2)  // rgba(241.74, 235.552, 227.46, 0.2)

hwb($hue $whiteness $blackness)
hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color

Dart Sass: с версии 1.78.0
LibSass: ✗
Ruby Sass: ✗

Возвращает цвет с заданными цветовым тоном, белизной и черностью и заданным каналом альфа.

Цветовой тон — число от 0deg до 360deg (включительно) и может быть безразмерным. Белизна и черность — числа обычно от 0% до 100% (включительно) и не могут быть безразмерными. Канал альфа может быть указан как безразмерное число от 0 до 1 (включительно) или процент от 0% до 100% (включительно).

Цветовой тон, выходящий за пределы 0deg и 360deg, эквивалентен $hue % 360deg. Если $whiteness + $blackness > 100%, два значения масштабируются таким образом, чтобы их сумма составляла 100%. Если $whiteness, $blackness или оба меньше 0%, это означает цвет за пределами стандартного диапазона RGB.

Варианты color.hwb() устарели. Новый код Sass должен использовать глобальную функцию hwb().

@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)
// SASS
@debug hwb(210deg 0% 60%)  // #036
@debug hwb(210 0% 60% / 0.5)  // rgba(0, 51, 102, 0.5)

if($condition, $if-true, $if-false)

Возвращает $if-true, если $condition является истинным, и $if-false в противном случае.

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

@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null
// SASS
@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

lab($lightness $a $b)
lab($lightness $a $b / $alpha) //=> color

Dart Sass: с 1.78.0
LibSass: ✗
Ruby Sass: ✗

Возвращает цвет с заданными каналами [светлота, a, b] и альфа-каналом.

Светлота — число от 0% до 100% (включительно), может быть без единиц измерения. Каналы a и b могут быть заданы либо безразмерными числами от -125 до 125 (включительно), либо процентами от -100% до 100% (включительно). Альфа-канал может быть задан либо безразмерным числом от 0 до 1 (включительно), либо процентами от 0% до 100% (включительно).

Светлота вне диапазона 0% и 100% ограничена этим диапазоном. Если каналы a или b выходят за пределы диапазона -125 до 125, это означает, что цвет выходит за стандартный гамма-диапазон CIELAB.

@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);
// SASS
@debug lab(50% -20 30)  // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5)  // lab(80% 0 25 / 0.5);

lch($lightness $chroma $hue)
lch($lightness $chroma $hue / $alpha) //=> color

Dart Sass: с 1.78.0
LibSass: ✗
Ruby Sass: ✗

Возвращает цвет с заданными каналами [светлота, крома, оттенок] и заданным альфа-каналом.

Светлота — число от 0% до 100% (включительно), может быть без единиц измерения. Канал крома может быть задан либо безразмерным числом от 0 до 150 (включительно), либо процентами от 0% до 100% (включительно). Оттенок — число от 0deg до 360deg (включительно), может быть без единиц измерения. Альфа-канал может быть задан либо безразмерным числом от 0 до 1 (включительно), либо процентами от 0% до 100% (включительно).

Светлота вне диапазона 0% и 100% ограничена этим диапазоном. Крома меньше 0 ограничена значением 0, а крома больше 150 означает, что цвет выходит за стандартный гамма-диапазон CIELAB. Оттенок вне диапазона 0deg и 360deg эквивалентен $hue % 360deg.

@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);
// SASS
@debug lch(50% 10 270deg)  // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5)  // lch(80% 75 72deg / 0.5);

oklab($lightness $a $b)
oklab($lightness $a $b / $alpha) //=> color

Dart Sass: с 1.78.0
LibSass: ✗
Ruby Sass: ✗

Возвращает цвет с заданными перцептивно-равномерной светлотой, a, b и альфа-каналами.

Светлота — число от 0% до 100% (включительно), может быть без единиц измерения. Каналы a и b могут быть заданы либо безразмерными числами от -0.4 до 0.4 (включительно), либо процентами от -100% до 100% (включительно). Альфа-канал может быть задан либо безразмерным числом от 0 до 1 (включительно), либо процентами от 0% до 100% (включительно).

Светлота вне диапазона 0% и 100% ограничена этим диапазоном. Если каналы a или b выходят за пределы диапазона -0.4 до 0.4, это означает, что цвет выходит за стандартный гамма-диапазон Oklab.

@debug oklab(50% -0.1 0.15); // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5); // oklab(80% 0 0.08 / 0.5)
// SASS
@debug oklab(50% -0.1 0.15)  // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5)  // oklab(80% 0 0.08 / 0.5)

oklch($lightness $chroma $hue)
oklch($lightness $chroma $hue / $alpha) //=> color

Dart Sass: с 1.78.0
LibSass: ✗
Ruby Sass: ✗

Возвращает цвет с заданными [перцептивно-равномерной светлотой, кромой и оттенком] и заданным альфа-каналом.

Светлота — число от 0% до 100% (включительно), может быть без единиц измерения. Канал крома может быть задан либо безразмерным числом от 0 до 0.4 (включительно), либо процентами от 0% до 100% (включительно). Оттенок — число от 0deg до 360deg (включительно), может быть без единиц измерения. Альфа-канал может быть задан либо безразмерным числом от 0 до 1 (включительно), либо процентами от 0% до 100% (включительно).

Светлота вне диапазона 0% и 100% ограничена этим диапазоном. Крома меньше 0 ограничена значением 0, а крома больше 0.4 означает, что цвет выходит за стандартный гамма-диапазон Oklab. Оттенок вне диапазона 0deg и 360deg эквивалентен $hue % 360deg.

@debug oklch(50% 0.3 270deg); // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5); // oklch(80% 0.2 72deg / 0.5);
// SASS
@debug oklch(50% 0.3 270deg)  // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5)  // oklch(80% 0.2 72deg / 0.5);

rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color

Dart Sass: с 1.15.0
LibSass: ✗
Ruby Sass: ✗

LibSass и Ruby Sass поддерживают только следующие сигнатуры:

rgb($red, $green, $blue)
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

Обратите внимание, что для этих реализаций аргумент $alpha является обязательным, если используется имя функции rgba(), и запрещённым, если используется имя функции rgb().

Dart Sass: ✓
LibSass: ✗
Ruby Sass: с 3.7.0

LibSass и более старые версии Ruby Sass не поддерживают значения альфа-канала, заданные в процентах.

Если переданы $red, $green, $blue и необязательно $alpha, возвращает цвет с заданными каналами красного, зелёного, синего и альфа-канала.

Каждый канал может быть задан либо безразмерным числом от 0 до 255 (включительно), либо процентами от 0% до 100% (включительно). Альфа-канал может быть задан либо безразмерным числом от 0 до 1 (включительно), либо процентами от 0% до 100% (включительно).

Если любой цветовой канал находится вне диапазона от 0 до 255, это означает, что цвет выходит за стандартный гамма-диапазон RGB.

Специальные правила разбора Sass для значений, разделённых слэшем, затрудняют передачу переменных для $blue или $alpha при использовании сигнатуры rgb($red $green $blue / $alpha). Рассмотрите использование rgb($red, $green, $blue, $alpha) вместо этого.

@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)
// SASS
@debug rgb(0 51 102)  // #036
@debug rgb(95%, 92.5%, 89.5%)  // #f2ece4
@debug rgb(0 51 102 / 50%)  // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)

Если переданы $color и $alpha, это возвращает $color с заданным каналом $alpha вместо оригинального альфа-канала.

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366
// SASS
@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/modules