0

Variables en CSS

18Dic
en CSS, CSS 3, Tutoriales

Mozilla siempre dando el paso al frente, esta vez nos trae una implementación del estándar creado por la W3C para el uso de variables en los CSS. En la versión 29 de Firefox Nigthly ya podemos hacer uso de variables CSS.
Sabiendo esto, vamos a la práctica:
Declarar una variable es similar a escribir propiedades pero utilizando el prefijo var-, para utilizarlas escribimos la instrucción var(), pasándole como parámetro la variable.

:root {
    var-azul: #369;
    var-rojo: red;
 }
h1 {
    color: var(azul);
}
h2 {
    color: var(rojo);
}
<h2>Rojo</h2>
<h1>Azul</h1>

cssv1
Las variables tienen ámbitos, por lo que pueden ser sobrescritas.

:root {
    var-azul: #369;
}
.clase-ambito{
    var-azul: #9999ff;
}
h1 {
    color: var(azul);
 }
<h1>Azul</h1>
<div class="clase-ambito">
    <h1>Azul2</h1>
</div>

cssv2
De esta forma, la etiqueta h1 que está dentro del div con clase clase-ambito, cambia su color.

Una variable puede almacenar cualquier valor. Incluso, si es numérica puedes reasignarle el valor usando calc() para cambiarlo. Veamos un ejemplo.

:root {
    var-talla: 350px;
    var-mediatalla: calc(var(talla)/2);
    var-rojo: red;
    var-borderstyle: 2px solid #000;
}
.clase-normal{
    width: var(talla);
    border: var(borderstyle);
 }
.clase-media{
width: var(mediatalla);
    var-borderstyle: 5px solid #255;
    color: var(rojo);
}
h2{
    border: var(borderstyle);
}
<div class="clase-normal">Clase Normal</div>
<div class="clase-media">
    <h2>Clase Media</h2>
</div>

cssv3Desde mi punto de vista creo que la sintaxis debería ser más sencilla, y evitar el uso de prefijos y funciones. Yo declararía las variables así:

&variable: valor;

Y las llamaría de la misma manera:

width: &variable;

No sé porque tanta complicación, pero bueno el estándar ya lo inventaron y nadie dijo nada.

De lo que está escrito en el estándar de la w3c todavía faltan cosas por implementar, pero esto es un primer paso para que los desarrolladores comiencen a familiarizarse. Si encuentras algún bug no dudes en reportarlo aquí.

Etiquetado en:

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.