Variables CSS!

En CSS, las propiedades personalizadas (también conocidas como variables) son propiedades que podemos declarar con el nombre que queramos y con el valor que queramos, para hacer uso mas adelante.

Las variables CSS están sujetas a la cascada, y heredan su valor de su padre.

Hay que recalcar que para crear variables en css debemos seguir ciertas reglas para que todo valla bien.

Para declarar propiedades personalizadas (variables) usamos un nombre que comience con dos guiones (--), y un valor, que puede ser cualquier valor válido de CSS (incluso cosas chungas, pero eso es un poco de jugarle).

Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:

selector {
  --color-de-fondo: blue;
}

Ten en cuenta que él selector que usemos para las reglas de estilo define el ámbito (o el famosísimo scope) en el que podremos usar la propiedad personalizada (la variable).

Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:

:root {
  --color-de-fondo: blue;
}

NOTA: Debemos tener en cuenta que las variables son sensibles (case sensitive), es decir, que una variable con mayusculas es diferente a una variable con minúsculas:

:root {
  --color-de-fondo: blue; ✅
  --COLOR-DE-FONDO: green; ✅
}

Ambas son correctas y ya es a gusto de cada quien como usarlas, pero realmente es recomendable que siempre sean en minúsculas para que no se aleje de las propiedades normal de css.

Usando Variables

Si bien ya tenemos nuestras variables, ahora hay que saber usarlas, si te preguntas que si nomas ponemos el nombre la variable como cualquier valor:

body {
  background-color: --color-de-fondo; ❌
}

Pues estas equivocado, para utilizarla hay que hacer uso de la función de var() que recordando esta solo puede ser usada solamente como valor de una propiedad, y que dentro de ella llamamos a nuestra variable css, para que la función se encargue de sustituir nuestra variable por su valor.

body {
  background-color: var(--color-de-fondo); ✅
}

Debemos notar que no sustituye el valor directamente, si no que esto ayuda a que el navegador reconozca que esa variable equivale a un valor dado anteriormente.

Fallback para las variables

Sí al momento de usar la función var() y también le pasamos nuestra variable css, esta dará como resultado el valor de nuestra variable, pero que pasa si hacemos esto pero nunca declaramos nuestra variable css?

La verdad es que no imprimirá nada, pero gracias a la función de var() podemos pasar otro valor (separando nuestra variable con una ",") que este sera tomado dado el caso que nuestra variable no exista 😎.

body {
  background-color: var(--color-de-fondo, #0f0); ✅ /* Verde (#0f0) si --color-de-fondo no esta definida */
}

Así, nos aseguramos de que nuestra propiedad siempre tendrá un valor, dado que por algún motivo la variable no exista (aun no la declaramos, por accidente alguien la borro, o simplemente no coloquemos el nombre de la variable correctamente, etc)

Y no es solo eso, podemos declarar multiples fallbacks para tener mayor seguridad de que siempre tendrá valor nuestra propiedad. Pero igual hay que respetar el orden y el como anidar los fallbacks:

.caja-2 {
  background-color: var(--color-base, var(--color-back, pink)); ✅ /* Rosa (pink) si --color-base y --color-back no están definidas */
}

.caja-3 {
  background-color: var(--color-base, --color-back, green); ❌ /* Invalido: "--background, green" */
}

Herencia

Las variables CSS se heredan.
Lo que significa que si no se establece ningún valor para una propiedad personalizada en un elemento dado, se utiliza el valor de su elemento padre.

Veamos el siguiente HTML:

<div class="padre">
  <div class="hijo-1">
    <div class="nieto-1"></div>
    <div class="nieto-2"></div>
  </div>
  <div class="hijo-2">
    <div class="nieto-3"></div>
    <div class="nieto-4"></div>
  </div>
</div>

y tenemos este css:

.hijo-1 {
  --test: 10px;
}

.nieto-1 {
  --test: 2em;
}

En este caso, los resultados de var(--test) son:

• Para el elemento class="hijo-1": 10px
• Para el elemento class="nieto-1": 2em
• Para el elemento class="nieto-2": 10px (heredado de su padre [.hijo])
• Para el elemento class="padre": es un valor no válido, qué es el valor predeterminado de cualquier propiedad personalizada.

Tenga en cuenta que éstas son variables css personalizadas, no son variables reales como podemos encontrar en otros lenguajes de programación.

El valor se calcula donde sea necesario, es decir solo en el elemento donde se declaro y para sus hijos (descendientes) y no se almacena para su uso en otras reglas (para elementos padres o hermanos)

Por ejemplo, no se puede declarar una variable css para un elemento y esperar usarla en las propiedades del descendiente (hijo) de un elemento hermano.

La variable css sólo está configurada para el selector que coincida y sus descendientes, como cualquier CSS normal.

.hijo-1 {
  --color-background: red; /* declaramos la variable */
}

.nieto-1 {
  background-color: var(--color-background); ✅ 
  /* el ".nieto-1" puede usar la variable ya que es descendente de ".hijo-1" y por lo tanto puede heredar la variable */
}

.nieto-4 {
  background-color: var(--color-background); ❌ 
  /* el ".nieto-4" **NO** puede usar la variable ya que es descendente de ".hijo-2", que es un hermano de ".hijo-1" y este no sabe que variables existen en sus hermanos y por lo tanto **NO** puede heredar la variable */
}

La forma mas fácil de que que todos reconozcan la variables es subiéndola a un nivel donde pueda heredarse a todos los descendientes (hijos), en este ejemplo, podemos colocar subir la variable a ".padre":

.padre {
  --color-background: red; /* subimos la variable */
}

.hijo-1 {
  /* --color-background: red; */
  /* quitamos la variable */ 
}

.nieto-1 {
  background-color: var(--color-background); ✅ 
  /* el ".nieto-1" puede usar la variable ya que es un descendente de ".padre" y por lo tanto puede heredar la variable */
}

.nieto-4 {
  background-color: var(--color-background); ✅ 
  /* el ".nieto-4" puede usar la variable ya que es un descendente de ".padre" y por lo tanto puede heredar la variable */
}