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

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario