Lección 4: 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

Si quieres que las variables solo se apliquen a un elemento en concreto, debes declararlas dentro de él.

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

La variable --color-naranja solo se aplicará a los elementos h1, y no podrá ser usada en otros elementos.

El código anterior sería equivalente a:

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

Aquí tienes otro ejemplo donde se busca que un elemento sea cuadrado pero además pueda ser manipulado desdeuna variable local..

.cuadrado {
    --lado: 10rem;
    width: var(--lado);
    height: var(--lado);
    background-color: #D95B43;
}

Configurando desde HTML

Si quieres que el usuario pueda configurar las variables, puedes hacerlo desde HTML. No es una práctica comú, pero puede sacarte de algún apuro.

Por ejemplo, si quieres que el usuario pueda manipular el padding de un elemento, puedes hacerlo de este modo:

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

Ahora ya podrías modificar la variable --separación desde HTML:

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

Variables básicas en un proyecto

Para que te hagas una idea de como puedes usar las variables en un proyecto, te dejo un ejemplo que utilizo recurrentemente en mis proyectos.

:root {
    /* Colors */
    --color-black: #000;
    --color-white: #fff;
    --color-primary: ...;
    --color-secondary: ...;

    /* Fonts */
    --font-heading: ...;
    --font-body: ...;

    /* Gaps */
    --gap-s: 0.9rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 3rem;
}

Más adelante utilizaremos un metalenguaje llamado SASS. Su equivalencia sería la siguiente:

//-- Variables
// Colors
$color-black: #000
$color-white: #fff
$color-primary: ...
$color-secondary: ...
// Fonts
$font-heading: ...
$font-body: ...
// Gaps
$gap-s: 0.9rem
$gap-m: 1rem
$gap-l: 1.5rem
$gap-xl: 2rem
$gap-xxl: 3rem