compile - ¿Por qué Sass cambia el formato de mis colores?

compile sass to css command line

Question

Sass está produciendo # 000 y #fff como valores de color blanco y negro en mi archivo css. Por ejemplo:

$color: #000;

.box {
    color: $color;
}

Salidas a:

.box {
  color: black;
}

¿No debería dar salida a los valores hexadecimales?

Answer 1

No.

black , white y los otros 145 nombres de colores son parte del estándar de CSS:

http://www.w3schools.com/cssref/css_colorsfull.asp

Todos los navegadores los manejan correctamente y, al mismo tiempo, son mucho más fáciles de comprender para un desarrollador de CSS.

Entonces están bien.

Answer 2

Cómo trata Sass los colores varía según la versión que estés utilizando. Pero hay algunos comportamientos comunes:

• Sass siempre maximizará la compatibilidad hacia atrás siempre que sea posible. Dado que la palabra clave , el hexadecimal y el rgba tienen la compatibilidad más amplia con el navegador, todos los colores se convertirán a uno de esos 3 formatos, dando prioridad a la palabra clave o hex. El formato rgba solo se usará si el color tiene transparencia alfa (si especifica rgba(0, 0, 0, 100) , Sass lo convertirá en black o en #000 )
• Si Sass tiene que elegir entre usar la palabra clave o los formatos hexadecimales, el que usará dependerá de la configuración de salida. Los modos compacto o comprimido siempre se convertirán a hexadecimal, los otros formatos usarán la palabra clave.
• Sass convertirá los colores hexadecimales a su formato de 3 dígitos en modo comprimido (por ejemplo, #000000 generará como #000 ).

Sass 3.3 y más viejo

Sass solo convierte colores cuando se usan como variables o si no están en uno de los 3 formatos descritos anteriormente:

$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);
}

Salida:

.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 y posterior

El único cambio de 3.3 a 3.4 es que al usar variables, Sass conservará el formato de su color ... a menos que esté en otro formato que no sea la palabra clave, el hexágono o los formatos rgba.

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

Pero, ¿y si realmente necesito un formato específico?

Si absolutamente debe tener un formato específico, puede convertirlo en una cadena:

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

Salida:

.foo {
  color: #F00;
}

Solo tenga en cuenta que cuando hace esto, su "color" no funcionará con las funciones de manipulación del color como lighten() u darken() .