logo

Lo que necesita saber sobre las variables CSS

Cuando los proyectos web crecen, su CSS generalmente se vuelve astronómicamente grande y, a menudo, desordenado. Para ayudarnos a lidiar con esto, las nuevas variables CSS pronto llegarán a los navegadores principales, lo que les dará a los desarrolladores la capacidad de reutilizar y editar fácilmente las propiedades CSS que se repiten.

Le mostramos cuán increíbles pueden ser las variables de hojas de estilo en nuestras lecciones Sass and Less, pero estos son preprocesadores y requieren compilación antes de su uso. Ahora que las variables están disponibles en Vanilla CSS, ¡puede usarlas de inmediato en su navegador!

Definición y uso de variables CSS

Las variables siguen las mismas reglas de alcance y herencia que cualquier otra definición de CSS. La forma más fácil de usarlos es hacerlos disponibles globalmente, agregando las declaraciones al :root pseudo-clase, para que todos los demás selectores puedan heredarla.

:root{
    --awesome-blue: #2196F3;
}

Para acceder al valor dentro de una variable podemos usar el var(...) sintaxis. Tenga en cuenta que los nombres distinguen entre mayúsculas y minúsculas, por lo que --foo != --FOO .

.some-element{
    background-color: var(--awesome-blue);
}

Soporte

En este momento, solo Firefox admite variables CSS listas para usar. Sin embargo, las versiones 49 y posteriores de Google Chrome también se enviarán con la función habilitada. Si todavía tiene la versión anterior de Chrome 48, puede habilitar esta y algunas otras tecnologías nuevas yendo a chrome://flags/ y encontrar Habilitar características experimentales de la plataforma web . Puede obtener más detalles aquí - ¿Puedo usar variables CSS?

A continuación hay un par de ejemplos que muestran el uso típico de las variables CSS. Para asegurarse de que funcionan correctamente, intente verlos en uno de los navegadores que hemos mencionado anteriormente.

Ejemplo 1 - Colores del tema

Las variables en CSS son más útiles cuando necesitamos aplicar las mismas reglas una y otra vez para múltiples elementos, p. los colores repetidos en un tema. En lugar de copiar y pegar cada vez que queramos reutilizar el mismo color, podemos colocarlo en una variable y acceder desde allí.

Ahora, si a nuestro cliente no le gusta el tono de azul que hemos elegido, podemos alterar los estilos en un solo lugar (la definición de nuestra variable) para cambiar los colores de todo el tema. Sin variables, tendríamos que buscar y reemplazar manualmente cada ocurrencia.

Para que esta demostración funcione correctamente, asegúrese de estar utilizando uno de estos navegadores. 

:root{
    --primary-color: #B1D7DC;
    --accent-color: #FF3F90;
}

html{
    background-color: var(--primary-color);
}

h3{
    border-bottom: 2px solid var(--primary-color);
}

button{
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}
<div class="container">
    <h3>Dialog Window</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate vitae nibh sed sodales. Maecenas non vulputate lacus, sed convallis eros. Cras sollicitudin, felis sit amet pharetra mattis, metus lectus ullamcorper magna.</p>
    <button>Confirm</button>
</div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    padding: 30px;
    font: normal 13px/1.5 sans-serif;
    color: #546567;
    background-color: var(--primary-color);
}

.container{
    background: #fff;
    padding: 20px;
}

h3{
    padding-bottom: 10px;
    margin-bottom: 15px;
}

p{
    background-color: #fff;
    margin: 15px 0;
}

button{
    font-size: 13px;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    outline: 0;
}

button:hover{
    opacity: 1;
}

Ejemplo 2 - Nombres legibles por humanos para propiedades

Otro gran uso de las variables es cuando queremos guardar un valor de propiedad más complejo, para que no tengamos que recordarlo. Buenos ejemplos son las reglas CSS con múltiples parámetros, como box-shadow , transform y font .

Al colocar la propiedad en una variable, podemos acceder a ella con un nombre semántico y legible por humanos.

Para que esta demostración funcione correctamente, asegúrese de estar utilizando uno de estos navegadores. 

:root{
    --tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    --animate-right: translateX(20px);
}
li{
    box-shadow: var(--tiny-shadow);
}
li:hover{
    transform: var(--animate-right);
}
<ul>
    <li>Hover on me!</li>
    <li>Hover on me!</li>
    <li>Hover on me!</li>
</ul>
html{
    background-color: #F9F9F9;
}
ul{
    padding: 20px;
    list-style: none;
    width: 300px;
}
li{
    font: normal 18px sans-serif;
    padding: 20px;
    transition: 0.4s;
    margin: 10px;
    color: #444;
    background-color: #fff;
    cursor: pointer;
}

Ejemplo 3 - Variables dinámicamente cambiantes

Cuando una propiedad personalizada se declara varias veces, las reglas en cascada estándar ayudan a resolver el conflicto y la definición más baja en la hoja de estilo sobrescribe las que están arriba.

El siguiente ejemplo demuestra lo fácil que es manipular dinámicamente las propiedades en la acción del usuario, manteniendo el código claro y conciso.

Para que esta demostración funcione correctamente, asegúrese de estar utilizando uno de estos navegadores. 

.blue-container{
    --title-text: 18px;
    --main-text: 14px;
}
.blue-container:hover{
    --title-text: 24px;
    --main-text: 16px;
}
.green-container:hover{
    --title-text: 30px;
    --main-text: 18px;
}
.title{
    font-size: var(--title-text);
}
.content{
    font-size: var(--main-text);
}
<div class="blue-container">
    <div class="green-container">
        <div class="container">
            <p class="title">A Title</p>
            <p class="content">Hover on the different color areas to change the size of this text and the title.</p>
        </div>
    </div>
</div>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    background: #eee;
    padding: 30px;
    font: 500 14px sans-serif;
    color: #333;
    line-height: 1.5;
}

.blue-container{
    background: #64B5F6;
    padding-left: 50px;
}

.green-container{
    background: #AED581;
    padding-left: 50px;
}

.container{
    background: #fff;
    padding: 20px;
}

p{
    transition: 0.4s;
}

.title{
    font-weight: bold;
}

Algunos consejos más

Como puede ver, las variables CSS son bastante sencillas de usar y los desarrolladores no tardarán mucho en comenzar a aplicarlas en todas partes. Aquí hay algunas cosas más que dejamos en el artículo, pero que vale la pena mencionar:

  • La función var() tiene un segundo parámetro, que se puede usar para proporcionar un valor alternativo si la propiedad personalizada falla:
    width: var(--custom-width, 20%);
  • Es posible anidar propiedades personalizadas:
    --base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);
  • Las variables se pueden combinar con otra adición reciente a CSS:la función calc(). Lamentablemente, esto solo funciona en Firefox por ahora.
    --container-width: 1000px;
max-width: calc(var(--container-width) / 2);

¡Esto concluye nuestro artículo! Diviértete probando esta nueva característica de CSS, pero recuerda que todavía se considera una tecnología experimental. Por ahora, evite usarlo en proyectos serios y apunte a proporcionar siempre alternativas.