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

Совместимость:
Dart Sass
since 1.23.0
LibSass
✗
Ruby Sass
✗

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

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

⚠️ Внимание!

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

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

SCSS Syntax

@use "sass:color";

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

Sass Syntax

@use "sass:color"

.button
  $primary-color: #6b717f
  color: $primary-color
  border: 1px solid color.scale($primary-color, $lightness: 20%)

CSS Output

.button {
  color: #6b717f;
  border: 1px solid #878d9a;
}

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

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

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
Совместимость (Level 4 Syntax):
Dart Sass
since 1.15.0
LibSass
✗
Ruby Sass
✗

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

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

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

Совместимость (Percent Alpha):
Dart Sass
✓
LibSass
✗
Ruby Sass
since 3.7.0

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

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

Оттенок - это число от 0deg до 360deg градусов (включительно) и может быть безразмерным. Насыщенность и яркость - это числа от 0% до 100% (включительно) и могут не быть безразмерными. Альфа-канал может быть указан либо как безразмерное число от 0 до 1 (включительно), либо как процентное соотношение между 0% и 100% (включительно).

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

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

SCSS Syntax

@debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%); // hsla(var(--peach), 20%)

Sass Syntax

@debug hsl(210deg 100% 20% / var(--opacity))  // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%)  // hsla(var(--peach), 20%)

⚠️ Внимание!

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

SCSS Syntax

@debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)

Sass Syntax

@debug hsl(210deg 100% 20%) // #036
@debug hsl(34, 35%, 92%) // #f2ece4
@debug hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2)  // rgba(242, 236, 228, 0.2)

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

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

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

SCSS Syntax

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

Sass Syntax

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

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
Совместимость (Level 4 Syntax):
Dart Sass
since 1.15.0
LibSass
✗
Ruby Sass
✗

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

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

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

Совместимость (Percent Alpha):
Dart Sass
✓
LibSass
✗
Ruby Sass
since 3.7.0

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

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

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

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

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

SCSS Syntax

@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2); // rgba(var(--peach), 0.2)

Sass Syntax

@debug rgb(0 51 102 / var(--opacity))  // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2)  // rgba(var(--peach), 0.2)

⚠️ Внимание!

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

SCSS Syntax

@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 Syntax

@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 вместо исходного альфа-канала.

SCSS Syntax

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

Sass Syntax

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