CSS3 Variables en Webkit

CSS3 Implementa muchas novedades que nos hacen a los programadores la vida un poco más fácil.

Así en las últimas versiones nightly de Webkit ya podemos apreciar como poco a poco se van introduciendo las variables propuestas por la W3C. Por ahora la cosa está en una versión muy temprana y va a ser muy posiblemente cambiado pero…

Usando CSS3 variables

Cómo haríamos las variables según lo propuesto a fecha de hoy? Veamos un ejemplo.

Declarando una variable CSS

Para declarar una variable, la definiremos dentro de un elemento, en este caso usaremos :root como base para todo el documento pero podríamos usar cualquier otro, en ese caso la variable sólo tendría valor en elementos de ese contexto.

:root {
    var-color-textos-defecto: #01cca5;
    var-margin-defecto: 0 15px 10px 3px;
}

Haciendo uso de la variable

Para hacer uso de la variable es tan sencillo como usar el nombre con un dolar delante.

div {
    font-color: $color-textos-defecto;
}

#elemento {
    margin: $margin-defecto;
}

Repito que todo esto es totalmente experimental y que puede cambiar y de echo es muy posible que cambie, pero nunca está mal echar un ojo a la posible implementación de las variables en CSS.

Corre la voz!

Comentarios

  1. ()

    Esperemos verlo completamente funcional dentro de poco!


Escribir un comentario

Escribe lo que desees, si quieres incluir código hazlo usando los tags <pre>

Nombre:
Email:
Website: