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

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Escribe el primer comentario