Cores
- Sass de Dart
- since 1.14.0
- LibSass
- since 3.6.0
- Sass de Ruby
- since 3.6.0
A LibSass e versões mais antigas da Sass de Dart ou Ruby não suportam cores hexadecimais com um canal de alfa.
A Sass tem suporte embutido para valores de cor. Tal como as cores de CSS, representam pontos no espaço de cor da sRGB, embora muitas funções de cor da Sass operam usando coordenadas de HSL (que são apenas uma outro maneira de expressar cores de sRGB). As cores de Sass podem ser escritas como códigos hexadecimais (#f2ece4 ou #b37399aa), nomes de cor de CSS (midnightblue, transparent), ou as funções rgb(), rgba(), hsl(), e 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)
💡 Fato Divertido:
No importa como uma cor de Sass é originalmente escrita, ela pode ser usada com ambas funções baseadas em HSL e RGB!
A CSS suporta muitos formatos diferentes que podem todos representar a mesma cor: seu nome, seu código hexadecimal, e sua notação funcional. Qual formato a Sass escolhe para compilar uma cor depende da própria cor, como foi escrita na folha de estilo original, e o modo de saída atual. Uma vez que pode variar muito, os autores da folha de estilo não deveriam depender de qualquer formato de saída particular para as cores que escrevem.
A Sass suporta muitas funções de cor úteis que podem ser usadas para criar novas cores baseadas naquelas existentes misturando as cores ou aumentando a suas tonalidade, saturação, ou claridade: