Цвета
- 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 поддерживает множество полезных цветовых функций, которые можно использовать для создания новых цветов на основе существующих, смешивая цвета вместе или масштабируя их оттенок, насыщенность или яркость.