En este artículo vamos a explicar cómo utilizar variables en nuestras hojas de estilo CSS, sus posibilidades y ventajas que nos ofrecen.
Hoy en día se suelen crear las hojas CSS con términos semánticos como en el framework de bootstrap. Estos frameworks utilizan clases con palabras como success, info, warning, danger, que significan éxito, información, advertencia, peligro.
Luego se añaden estas palabras a otras clases CSS para definir cajas, paneles, botones, etc con significado. Esto permite tener un ámplio catálogo de clases diferentes pero con el mismo significado semántico asignado a un color.
Por ejemplo, las clases para botones btn-success, btn-warning, btn-danger, btn-info, pueden significar Enviar, Editar, Borrar, Info, respectivamente.
En este tipo de hojas CSS semánticas asociamos un significado a un color
La forma habitual de construir nuestra hoja de estilos CSS sería elegir un color que identifique a nuestro elemento success y añadirlo a una clase.
Por ejemplo, podemos establecer el tipo de color de fondo de todos nuestros elementos semánticos de éxito con #d4edda y construir la clase botón asi:
.btn-success {
color: #155724;
border-radius: 4px;
padding: 0.75em 1em;
border: 1px solid #155724;
background-color: #d4edda;
}Al crear clases semánticas, asociamos el mismo color al mismo significado y lo utilizamos para el resto de elementos como paneles, cajas, etc.
.panel-success { background-color: #d4edda; }
.btn-success { background-color: #d4edda; }
.box-success { background-color: #d4edda; }
etc.El problema viene cuando queremos cambiar uno de nuestros colores semanticos. Entonces también debemos cambiar todas las clases que lo contengan.
Y sí, con un editor podemos hacer un copiar y reemplazar y listos con cada color pero … Que tal sería cambiarlo en un único sitio? Mejor no?
Ahora podemos utilizar variables en CSS dentro de un elemento :root y asignarles un nombre precedido de dos guines medios — como por ejemplo:
:root {
--success-color: #155724;
--success-background-color: #d4edda;
}Una vez definidas las variables y su color, para asignarlas a las clases CSS lo hacemos con var(--nombre), como en nuestra clase botón:
.btn-success {
color: var(--success-color);
border-radius: 4px;
padding: 0.75em 1em;
border: 1px solid var(--success-color);
background-color: var(--success-background-color);
}Podemos apreciar que el CSS funciona exactamente igual. Salvo que en vez del color #d4edda ahora escribimos su variable var(–success-color) y lo mismo para el color de fondo.
Si queremos añadir una propiedad para el evento :hover de nuestro botón podemos invertir los colores haciendo:
.btn-success:hover {
color: var(--success-background-color);
background-color: var(--success-color);
}Y listos!!
Ahora podemos darle un toque más claro o más oscuro simplemente modificando el color en las variables de :root. Automáticamente se aplicará a toda nuestra hoja de estilos.
Si tienes problemas para actualizar tu hoja de estilos en Internet quizás te puede interesar el siguiente artículo Actualizar hoja de estilos css.
¡ Espero que este artículo sea de vuestro interés !