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.
¿Me ayudas?

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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios