Spec-Zone.ru › Sass

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

Совместимость:
Dart Sass
начиная с 1.23.0
LibSass
✗
Ruby Sass
✗
➤

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

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

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

Несколько функций доступны только глобально даже в новой системе модулей, поскольку добавляют дополнительное поведение к встроенным функциям CSS.

@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(53.0055304173%, 55.2257415787%, 60.4062342886%);
}

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
Совместимость (синтаксис уровня 4):
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)
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
Совместимость (синтаксис уровня 4):
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

Устаревшие функции 

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

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

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

Теперь, когда в CSS появился собственный синтаксис функции if(), Sass переходит на его использование. Старая функция if() объявлена устаревшей, хотя в Dart Sass она будет поддерживаться до версии 3.0.0. Дополнительные сведения см. в разделе /d/if-function.

@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

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API