Цвета

Совместимость (Level 4 Syntax):
Dart Sass
since 1.14.0
LibSass
since 3.6.0
Ruby Sass
since 3.6.0

LibSass и более старые версии Dart или Ruby Sass не поддерживают шестнадцатеричные цвета с альфа-каналом.

Sass имеет встроенную поддержку значений цвета. Как и цвета CSS, они представляют точки в цветовом пространстве sRGB, хотя многие функции цвета Sass работают с использованием координат HSL (которые являются просто еще одним способом выражения цветов sRGB). Цвета Sass могут быть записаны как шестнадцатеричные коды (#f2ece4 или #b37399aa), имена цветов CSS (midnightblue, transparent) или функции rgb(), rgba(), hsl() и hsla().

SCSS Syntax

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

Sass Syntax

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204, 102, 153)  // #c69
@debug rgba(107, 113, 127, 0.8)  // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%)  // #dadbdf
@debug hsla(20, 20%, 85%, 0.7)  // rgb(225, 215, 210, 0.7)

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

Независимо от того, как изначально был написан цвет Sass, его можно использовать как с функциями на основе HSL, так и с функциями на основе RGB!

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

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

SCSS Syntax

$venus: #998099;

@debug scale-color($venus, $lightness: +15%); // #a893a8
@debug mix($venus, midnightblue); // #594d85

Sass Syntax

$venus: #998099

@debug scale-color($venus, $lightness: +15%)  // #a893a8
@debug mix($venus, midnightblue)  // #594d85