Todo sobre mis variables de CSS

Cuando un proyecto web se hace muy grande, por lo general, el CSS pasa a ser astronómicamente gigante e imposible de gestionar debido a lo desordenado que suele estar todo. Para ayudarte a hacer frente a esto, las nuevas variables CSS están a punto de irrumpir en los navegadores convencionales, otorgando a los desarrolladores la capacidad de reutilizar y editar de forma sencilla las propiedades del CSS.

En anteriores artículos te hemos mostrado cómo utilizar variables en hojas de estilo usando Sass y Less, pero éstos son pre-procesadores y requieren que sean compilados antes de utilizarse. Ahora que las variables están disponibles en vanilla CSS, puedes ponerlas en práctica de inmediato en tu navegador. ¿No es impresionante?

Definición y uso de variables CSS

Las variables siguen las mismas reglas de alcance y de herencia que cualquier otra definición CSS. La forma más fácil de utilizarlas, es hacerlas globales, insertándolas en la declaración de la pseudo clase :root, para que los demás selectores pueden heredarlas.

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

Para acceder al valor dentro de una variable podemos utilizar la sintaxis var(...). Ten en cuenta que los nombres distinguen entre mayúsculas y minúsculas, por lo tanto...

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

Soporte

En este momento, sólo Firefox soporta variables CSS out of the box. De todas maneras, la versión 49 y superior de Google Chrome también contará con la función activada por defecto. Si todavía usas la versión anterior de Chrome, la 48, puedes habilitar esta función yendo a chrome://flags/ y activando la característica Enable experimental Web Platform features. Puedes obtener más detalles sobre esto aquí, ¿Puedo utilizar variables CSS?.

A continuación te mostramos un par de ejemplos que muestran el uso típico de las variables de CSS. Para asegurarte de que funcionan correctamente, intenta verlas en uno de los navegadores que hemos mencionado anteriormente.

Ejemplo 1 - Colores

Las variables en CSS son muy útiles cuando tenemos que aplicar las mismas reglas una y otra vez en varios elementos, por ejemplo, los colores que se repiten en una plantilla. En lugar de copiar y pegar cada vez que desees volver a utilizar el mismo color, podemos colocarlo en una variable y acceder a él desde allí.

Por ejemplo, si a nuestro cliente no le gusta el tono de azul que hemos elegido, podemos alterar los estilos editándolos desde un solo lugar (la definición de la variable) para cambiar los colores de toda la plantilla. Sin las variables, tendríamos que buscar y reemplazar cada declaración de ese color de forma manual.

Para que esta demostración funcione correctamente asegúrate de que estás utilizando uno de los navegadores que hemos indicado antes.

: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);
}

Ejemplo 2 - Nombres legibles por humanos en las propiedades

Otro muy buen uso de las variables es cuando queremos guardar un valor de propiedad un poco complejo para no tener que recordarlo. Buenos ejemplos de esto son las reglas CSS con múltiples parámetros como box-shadow, transforma y font.

Al colocar la propiedad en una variable podemos acceder a ella mediante un nombre legible semánticamente.

Para que esta demostración funcione correctamente asegúrate de que estás utilizando uno de los navegadores que hemos indicado antes.

: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);
}

Ejemplo 3 - Cambiar variables dinámicamente

Cuando una propiedad personalizada es declarada varias veces, las reglas de cascada estándar ayudan a resolver el conflicto y la definición con posición más inferior en la hoja de estilo sobrescribe las que están por encima de ella.

El siguiente ejemplo demuestra lo fácil que es manipular dinámicamente propiedades relativas a la acción del usuario, sin dejar de mantener el código claro y conciso.

Para que esta demostración funcione correctamente asegúrate de que estás utilizando uno de los navegadores que hemos indicado antes.

.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);
}

Algunos consejos más

Como puedes ver, las variables de CSS son bastante sencillas de usar y no pasará mucho tiempo en que los desarrolladores comiencen a aplicarlo a todas partes. Antes de cerrar el artículo, nos queremos despedir con unos cuantos consejitos relativos a este tema:

- La función var() cuenta con un segundo parámetro, el cual se puede utilizar para suministrar un valor de retorno 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 inserción reciente de CSS, la función calc(). Por desgracia, esto sólo funciona en Firefox por ahora:

--container-width: 1000px;
max-width: calc(var(--container-width) / 2);

Con esto concluye nuestro artículo. Atrévete a probar esta nueva característica de CSS, pero recuerda que esto todavía se considera una tecnología experimental. Por ahora, no lo utilices en proyectos serios.

Fuente: tutorialzine.com