Por que o Sass muda o formato das minhas colors?

O Sass está exibindo # 000 e #fff como valores de cor preto e branco no meu arquivo css. Por exemplo:

$color: #000; .box { color: $color; } 

Saídas para:

 .box { color: black; } 

Não deve produzir os valores hexadecimais?

Como o Sass trata as colors varia dependendo da versão que você está usando. Mas existem alguns comportamentos comuns:

  • O Sass sempre maximizará a compatibilidade com versões anteriores sempre que possível. Como a palavra-chave , o hex e o rgba têm o suporte a navegadores mais amplo, todas as colors serão convertidas em um desses três formatos, priorizando a palavra-chave ou hexadecimal. O formato rgba só será usado se a cor tiver transparência alfa (se você especificar rgba(0, 0, 0, 100) , o Sass o converterá em black ou em #000 )
  • Se o Sass tiver que escolher entre usar a palavra-chave ou formatos hexadecimais, o que usará dependerá das configurações de saída. Os modos compactos ou compactados sempre serão convertidos em hexadecimal, os outros formatos usarão a palavra-chave.
  • O Sass converterá as colors hexadecimais em seu formato de 3 dígitos no modo comprimido (por exemplo, #000000 será #000000 como #000 ).

Sass 3.3 e mais velhos

Sass converte colors quando elas são usadas como variables ​​ou se elas não estiverem em um dos três formatos descritos acima:

 $color-hex: #000000; $color-keyword: black; $color-rgb: rgb(0, 0, 0); $color-hsl: hsl(0, 0, 0); .box-hex { color: $color-hex; background: #000000; } .box-keyword { color: $color-keyword; background: black; } .box-rgb { color: $color-rgb; background: rgb(0, 0, 0); } .box-hsl { color: $color-hsl; background: hsl(0, 0, 0); } 

Saída:

 .box-hex { color: black; background: #000000; } .box-keyword { color: black; background: black; } .box-rgb { color: black; background: black; } .box-hsl { color: black; background: black; } 

Sass 3.4 e posterior

A única mudança de 3.3 para 3.4 é que, ao usar variables, o Sass preservará o formato da sua cor … a menos que esteja em algo diferente dos formatos palavra-chave, hexadecimal ou rgba.

 .box-hex { color: #000000; background: #000000; } 

Mas e se eu realmente precisar de um formato específico?

Se você absolutamente precisa ter um formato específico, você pode transformá-lo em uma string:

 $color: #{'#F00'}; // or `unquote('#F00')` .foo { color: $color; } 

Saída:

 .foo { color: #F00; } 

Apenas tenha em mente que quando você fizer isso, sua “cor” não funcionará com funções de manipulação de colors como lighten() ou darken() .