CSS tutorial para usar variables

Es inevitable, y recomendable, ir repitiendo una serie de estilos dentro de tu web. Dará la personalidad al diseño usar las mismas: fuentes, colores, tamaños, separaciones… y otras características. Pero, claro, ello hace que sea complejo de construir. A no ser que tengas un disco duro conectado a la oreja, será difícil acordarse de todo en todo momento. Por ello en este tutorial te voy a mostrar como usar las variables de CSS3. Una técnica que te servirá para no solo para trabajar más rápido, sino que sea flexible el desarrollo para trabajar con otros compañeros.

Generales

Para aplicar unas variables que se apliquen a todo el documento debemos declararlas dentro de :root.

:root {
    --color-amarillo: #ECD078;
    --color-naranja: #D95B43;
    --color-rojo: #C02942;
    --fuente-titulo: 'Arial';
}

h1 {
    color: var(--color-naranja);
    font-family: var(--fuente-titulo);
}

Sería equivalente a:

h1 {
    color: #D95B43;
    font-family: 'Arial';
}

Locales

h1 {
    --color-naranja: #D95B43;
    color: var(--color-naranja);
    border: 2px solid var(--color-naranja);
}

Sería equivalente a:

h1 {
    color: #D95B43;
    border: 2px solid #D95B43;
}

Configurando desde HTML

Pongamos el caso que tienes una clase que necesitas darle una configuración especial. Por ejemplo necesitas indicarle el padding. La solución con variables sería indicarle que el tamaño del padding va a ser indicado.

.titulo {
    padding: var(--separacion);
    text-transform: uppercase;
    color: #D95B43;
}

¿Donde esta declarada la separación? En el propio HTML dentro de style.

<html>
    <body>
        <h1 class="titulo" style="--separacion: 4rem">Hola</h1>
    </body>
</html>

Por supuesto, si usas SASS para tu proyecto no necesitarías trabajar de este modo.

Si conocen algún otro truco relacionado con las variables, por favor dejen un comentario.

Versión escritorio