CSS. Crear variables

Submitted by tech4life on

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