Cuando estamos creando una página web o bien un theme de Drupal y le queremos aplicar un diseño, nos puede interesar usar variables para darles un valor y utilizarlo en diferentes partes de nuestra hoja de estilo.
Para crear la variable y darle valor podemos hacer lo siguiente
:root{
--bg-color: #5e5e5e;
--font-color-white: white;
--padding-left:10vw;
--padding-right:10vw;
}
Si utilizamos en elemento :root podremos utilizar las variables en cualquier elemento de nuestro css.
Para definir las variables y sus valores debemos poner "--" seguido del nombre de nuestra variable y el valor.
Luego cuando lo queremos utilizar solo tenemos que hacer :
.footer--bottom{
border: 1px solid black;
background-color: var(--bg-color);
padding-left:var(--padding-left);
padding-right: var(--padding-right);
}
Podemos alternar el uso normal de valores con el uso de variables, y para utilizar la variable, debemos utilizar la función var().
Esperamos que os haya sido de utilidad.
Lenguaje
Nivel