Цвета

Совместимость (цветовые пространства):

Dart Sass

начиная с версии 1.79.0

LibSass

✗

Ruby Sass

✗

➤

Совместимость (синтаксис уровня 4):

Dart Sass

начиная с версии 1.14.0

LibSass

✗

Ruby Sass

начиная с версии 3.6.0

➤

Sass имеет встроенную поддержку цветовых значений. Как и цвета CSS, каждый цвет представляет точку в определённом цветовом пространстве, например rgb или lab. Цвета Sass можно записывать в виде шестнадцатеричных кодов (#f2ece4 или #b37399aa), названий цветов CSS (midnightblue, transparent) или цветовых функций, таких как rgb(), lab() или color().

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)

// SASS
@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204 102 153)  // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7)  // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576)  // color(display-p3 0.597 0.732 0.576)

Цветовые пространства

Sass поддерживает тот же набор цветовых пространств, что и CSS. Цвет Sass всегда выводится в том же цветовом пространстве, в котором он был записан, если только это не устаревшее цветовое пространство или если вы не преобразуете его в другое пространство с помощью color.to-space(). Все остальные цветовые функции Sass всегда возвращают цвет в том же пространстве, что и исходный цвет, даже если функция изменила этот цвет в другом пространстве.

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

Ниже приведён полный список цветовых пространств, поддерживаемых Sass. Подробнее об этих пространствах можно прочитать на MDN.

Совместимость (display-p3-linear):

Dart Sass

начиная с версии 1.97.0

LibSass

✗

Ruby Sass

✗

Пространства, отмеченные *, являются устаревшими цветовыми пространствами.

Отсутствующие каналы

Цвета в CSS и Sass могут иметь «отсутствующие каналы», которые записываются как none и обозначают канал, значение которого неизвестно или не влияет на отображение цвета. Например, можно записать hsl(none 0% 50%), поскольку тон не имеет значения, если насыщенность равна 0%. В большинстве случаев отсутствующие каналы просто считаются равными 0, но иногда они всё же имеют значение:

• Если вы смешиваете цвета — например, при интерполяции CSS для анимации или с помощью функции Sass color.mix(), — отсутствующие каналы по возможности всегда принимают значение соответствующего канала другого цвета.

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

Хотя функция color.channel() возвращает 0 для отсутствующих каналов, их всегда можно проверить с помощью color.is-missing().

@use 'sass:color';

$grey: hsl(none 0% 50%);

@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)

// SASS
@use 'sass:color'

$grey: hsl(none 0% 50%)

@debug color.mix($grey, blue, $method: hsl)  // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch)  // lch(53.3889647411% 0 none)

Неактивные каналы

При определённых обстоятельствах цветовой канал считается «неактивным»: его значение не влияет на то, как цвет отображается на экране. Спецификация CSS требует, чтобы при преобразовании цвета в новое пространство все неактивные каналы заменялись на none. Sass делает это во всех случаях, кроме преобразований в устаревшие пространства, чтобы преобразование в устаревшее пространство всегда давало цвет, совместимый со старыми браузерами.

Подробнее о неактивных каналах см. в разделе color.is-powerless().

Устаревшие цветовые пространства

Исторически CSS и Sass поддерживали только стандартный охват RGB и только функции rgb, hsl и hwb для задания цветов. Поскольку в то время все цвета использовали один и тот же охват, любая цветовая функция работала с любым цветом независимо от его цветового пространства. Sass по-прежнему сохраняет такое поведение, но только для старых функций и только для цветов в этих трёх «устаревших» цветовых пространствах. Тем не менее при использовании цветовых функций рекомендуется явно указывать $space, в котором вы хотите работать.

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

Цветовые функции

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

@use 'sass:color';

$venus: #998099;

@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)

// SASS
@use 'sass:color'

$venus: #998099

@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)