Цвета

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

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.

Пространства, помеченные звёздочкой (*), являются устаревшими цветовыми пространствами.

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

В цветах 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)