Variables CSS en CSS puro: comenzar en 5 minutos o menos

Las variables CSS (o oficialmente: propiedades personalizadas ) en CSS puro ahorran mucho tiempo a cualquiera que esté dispuesto a invertir cinco minutos en aprender a usarlas. Han existido desde CSS3, y el 92% de todos los usuarios tienen navegadores que los admiten. El uso de variables CSS no requiere cambios significativos en las hojas de estilo existentes o nuevas herramientas y se puede aplicar fácilmente a proyectos antiguos. En lugar de tener un código de color hexadecimal escrito en cientos de lugares en un archivo, puede tenerlo definido en un solo lugar, con una variable CSS. Un gran ahorro de tiempo y ayuda para hacer que las hojas de estilo sean más consistentes.

Espera, entonces esto es Saas o Menos, ¿verdad?

No, aquí estamos hablando de CSS puro, no de CSS junto con un preprocesador como Saas, Less o SCSS. El uso de variables CSS no requiere herramientas adicionales, editores o cambios en su flujo de trabajo o cualquier otra cosa que use. Por lo tanto, los archivos CSS existentes sin variables no requieren ningún cambio "especial", y puede mezclar y combinar: use variables solo para partes del archivo, o solo en algunos archivos es su proyecto.

Los preprocesadores CSS como Saas o Less también admiten variables. Además, tienen muchas más funciones y opciones que puedes usar. Sin embargo, como sugiere el nombre, requieren un preprocesador, una herramienta que convierte CSS escrito en Saas en CSS puro. Si solo necesita variables, CSS puro tiene todo lo que necesita.

Las variables CSS son una función nativa, y eso es lo que las hace geniales. Con un mínimo esfuerzo, sus hojas de estilo son mucho más legibles y consistentes. Además, cualquier cambio que tenga que hacer más adelante es mucho más fácil de hacer, ciertamente más rápido que buscar y reemplazar cuando necesita cambiar un código de color en cientos de lugares .

Vamos a crear algunas variables

Como en cualquier lenguaje de programación, hay dos pasos para usar variables : darles valor (definirlas) y usarlas (colocarlas en todos los lugares donde necesita ese valor). Haremos lo mismo;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Si desea utilizar una variable globalmente (en cualquier lugar) en el archivo CSS, debe definirla en la :root . La ubicación en el archivo no importa. Puede estar al principio o al final del archivo. Pero, tienes que poner la variable en :root . El nombre debe comenzar con un guión doble -- no puede contener espacios. Las variables CSS pueden contener cualquier valor que normalmente asigne a una propiedad CSS; desde valores simples como colores hasta expresiones complejas para propiedades abreviadas como el fondo o la sombra.

Para usar una variable (para obtener su valor) colóquela en la función var() . No olvide que todos los nombres de variables comienzan con -- . Eso es todo lo que necesitas saber para empezar.

Uso de valores alternativos

En caso de que una variable no esté definida, se puede proporcionar un valor alternativo a la función var() como segundo parámetro.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

No se preocupe si el valor de la propiedad es complejo. El parámetro de reserva permite comas (consulte el ejemplo box-shadow ). También permite el encadenamiento de múltiples funciones var() como se muestra para el color en .custom-text . Si --my-red y --my-blue no están definidas, se utilizará el rojo como color.

La combinación de var() y calc() también funciona, sin sorpresas en la sintaxis. Aquí hay un ejemplo que incluye una variable local que solo está disponible en la clase en la que se definió.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Use calc() con moderación. No es algo malo, pero cuando se usa en exceso se vuelve bastante problemático para depurar y mantener.

Obtener y configurar variables CSS a través de JavaScript

Al usar JavaScript simple, puede establecer nuevas variables CSS y acceder a sus valores. Yo no uso este método. En cambio, prefiero cambiar la clase del elemento. Sin embargo, no hay nada de malo si desea acceder a las variables CSS a través de JavaScript. Ciertamente es utilizable en algunas situaciones. Aquellos que se adhieren a jQuery, pueden convertir el código en un complemento de jQuery.

Para crear una nueva variable, o cambiar el valor de una existente, use:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Acceder a una variable es un poco más complejo. Si la variable se define a través de JS, utilice:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Sin embargo, si se define a través de CSS (y generalmente lo será), use este código:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Problemas y cosas a tener en cuenta

Ahora que sabe cómo usar variables, no se exceda con ellas y cree una variable para cada valor de propiedad en la hoja de estilo. Por ejemplo, esto sería exagerar y abusar de todo el concepto;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

No lograste nada. Acabo de recibir --spacing-10 en lugar de 10px . Pronto terminará creando veinte variables más para cada valor de píxel de relleno que haya de 5 px a 100 px. Si busca consistencia, opte por un concepto de --small-padding, --medium-padding, --large-padding y asigne los valores numéricos apropiados.

Aunque no es requerido por el estándar CSS, sugiero de todo corazón definir todas las variables en un solo lugar y al principio del archivo CSS . De esa manera, siempre sabrá dónde están y podrá cambiar rápidamente los valores. Si dispersa las definiciones por todo el archivo, tendrá dificultades para rastrear las cosas y podría terminar definiendo la misma variable en varios lugares. Depurar eso no será una tarea divertida.

No hay razón para no usar variables CSS

En Internet, las cosas avanzan rápido (como el reemplazo de las cookies por almacenamiento local). Para grandes proyectos y grandes equipos, cambiar a preprocesadores CSS como Saas es el camino correcto. Sin embargo, para proyectos más pequeños o proyectos existentes que requieren mantenimiento, las variables CSS en CSS puro son la solución adecuada . No requieren absolutamente ningún cambio, actualizaciones de software o herramientas ni nada. Usted define una variable y comienza a usarla.