Question

Buenas, me gustaría saber como crear variables en css y como usarlas, quiero crear las variables para darles como valor colores y dado cualquier circunstancia poder cambiarlos con facilidad, he mirado varia información en la web y me encontré con esto pero no funciona.

:root {  
  --normal: 1.3;
  --peque: .8;  
}       
h1 {  
  font-size: calc(var(--normal)rem + 10px);
  line-height: calc(var(--normal)rem + var(--peque)rem);
}

Y también me encontré de esta otra forma pero tampoco funciona.

@variables { keyColor: #f00; }
h1 { color: var(keyColor); }

Ya probé con la ultima versión de 5 navegadores y ninguno me funciona como chrome, mozilla, IE, opera y safari, ahora no logro encontrar como distinguir de una hoja de estilo escrita en css a una en css3 tal vez ese sea el inconveniente. De antemano les agradezco sus conocimientos y ayuda, quedo atento gracias.

Answer 1

Buenas.

CSS en sí no tiene variables, puesto que realmente no es un lenguaje de programación, si no una forma de representar estilos.

Para suplir esta carencia, hace tiempo que surgieron los lenguajes dinámicos de generación de CSS, o también llamados preprocesadores de CSS, de los cuales sus dos mayores exponentes son LESS y SCSS (anteriormente SASS) y que te permiten no solo añadir variables, si no utilizar flujos de control (por ejemplo bucles) y otra serie de características.

Solo hay un "pero": Que así, a pelo, los navegadores (por ahora) no están preparados para "entender" (o más bien para procesar y generar CSS) ni los archivos LESS ni los SCSS.

Pero es un problema fácilmente solventable: tienes varias opciones, desde ejecutar un "compilador" que transforme tu fichero LESS o SCSS en CSS, lo cual tienes que hacer antes de distribuir tu código (si utilizas algún tipo de sistema automático de subida/compilado de tu código, tipo gulp, sería tan fácil como meter una tarea que te realice ese paso, si no, lo haces a mano), hasta simplemente incluir un javascript en tu página que te realiza esa transformación/preprocesado/compilado "al vuelo".

Esta última solución es la más sencilla, pero también la menos eficiente, puesto que cada cliente estaría generando esa compilación al acceder a tu página. Es mejor tenerlo compilado previamente, y mucho mejor si esa compilación está dentro de algún sistema automático.

Tienes más información en las páginas oficiales: http://sass-lang.com/ y http://lesscss.org/