Variables

<< gap y alineación Nuevos selectores >>

Hace unos años, la única forma que teníamos para guardar valores de CSS era mediante preprocesadores como LESS o Sass, a día de hoy tenemos las custom properties que nos permite asignar un valor a una propiedad y poderlo utilizar en múltiples partes del documento, de tal forma que si debemos cambiar su valor, se cambia 1 vez y no en tantas líneas como sitios hemos asignado ese valor a dicha propiedad.

¿Cómo declaramos una variable en css y cómo la utilizamos? Para declarar una variable en CSS utilizaremos dos guiones previos al nombre que le vamos a dar.

:root {
      --main-bg-color: brown;
}

En el ejemplo anterior, se está usando la pseudoclase :root, es decir, a la raíz del documento, <html>. Con esto estamos haciendo que esta custom property esté definida para esa etiqueta html (o cualquier descendiente que tenga), por tanto, para todo el documento. ¿Cómo utilizo esta variable? Para ello usaremos el método: var()

#selector {
      background-color: var(--main-bg-color);
}

<div class="parent">
      <div class="first child">1</div>
      <div class="second child">2</div>
</div>
<div class="third child">1</div>

En el anterior ejemplo definimos la variable --background-color, de tal forma que los dos primeros child serán negro (clase parent e hijos), el primer elemento child se sobreescribe por purple (al aplicarse .first), y el tercer elemento child no va a tener ninguna variable definida (está fuera de parent) y por tanto pasará a tener el color blue que es el valor que le hemos puesto por defecto (segundo paŕametro de entrada al método var). Este segundo valor se denomina fallback, es el valor por defecto si no está definida la variable anterior.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo preferences</title>
    <link rel="stylesheet" href="preferences.css">
</head>

<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, voluptatum iusto? Deleniti vitae voluptatibus
        voluptate doloribus excepturi, eligendi, modi impedit iste alias adipisci reprehenderit harum quibusdam corrupti
        nisi placeat officia!</p>
</body>

</html>

<< gap y alineación Nuevos selectores >>