Las variables CSS, también conocidas como propiedades personalizadas, lo ayudan a minimizar la repetición en sus hojas de estilo. Esto, a su vez, le ayuda a ahorrar tiempo y esfuerzo al realizar cambios en su diseño. También puede estar seguro de que no perderá ningún valor que necesite actualizar.
El acceso al DOM le permite crear variables, almacenarlas y reutilizarlas en su hoja de estilo.
Cómo definir y usar variables CSS
Para que sus hojas de estilo estén más organizadas, fáciles de mantener y reutilizables, puede utilizar variables CSS en cualquier propiedad que acepte un valor.
Tome el siguiente ejemplo de un archivo HTML y un archivo CSS que no usa variables CSS.
HTML:
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
Así es como debería verse tu página:
La clase .btn utilizada en la hoja de estilo anterior no es dinámica y hace que cree una clase separada para personalizar botones individuales. La creación de hermosos sitios web requiere que seas dinámico con el estilo de tu interfaz. Implementar botones de esta manera simplemente hará que esa tarea sea difícil de lograr.
Como la mayoría de los lenguajes de programación, debe inicializar y sustituir las variables CSS.
Para inicializar una variable CSS, prefije el nombre de la variable con guiones dobles:
:root{
/*CSS variable*/
--variable_name: value;
}
Puede inicializar una variable en cualquier lugar, pero tenga en cuenta que solo podrá usar esa variable dentro del selector inicializado. Debido a esto, las variables CSS se inicializan convencionalmente dentro del selector raíz. Esto apunta al elemento de más alto nivel del DOM y permite que todo el documento HTML pueda acceder a las variables a escala global.
Para sustituir la variable en su estilo CSS, utilizará la propiedad var() :
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
El selector raíz contiene dos variables: --primary y --secundary . Luego, ambas variables se sustituyen en la clase .btn como color y color de fondo, respectivamente.
Usando las variables, puede diseñar elementos individuales mucho más fácilmente. Al reutilizar variables, puede cambiar rápidamente un valor una vez para actualizarlo en cada instancia.
La propiedad var() también puede tomar un segundo argumento. Este argumento actúa como un valor alternativo para el primer argumento en una situación en la que el primero no está definido o no es válido.
Por ejemplo:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
En este ejemplo, sustituya la variable --primary en color style. Si por alguna razón, este valor falla, la hoja de estilo utilizará el segundo valor como respaldo. También puede usar otra variable CSS como valor alternativo.
Manipulación y anulación de variables CSS con JavaScript
La manipulación de variables CSS usando JavaScript puede ser una forma poderosa de cambiar la apariencia de su sitio web sobre la marcha. Usando JavaScript, puede actualizar los valores de estas variables y ver los cambios reflejados en su sitio.
Es importante tener en cuenta que los cambios realizados con JavaScript solo se aplicarán a la sesión actual. Debe actualizar la fuente original o almacenar el nuevo valor en el cliente, como en una cookie , para conservar los cambios.
Aquí hay un ejemplo de cómo usar JavaScript para actualizar el valor de una variable CSS.
HTML:
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
En este código JavaScript, la función changeColor() actualiza el color del primer botón cuando el usuario hace clic en él.
Con los métodos transversales de DOM , puede acceder a las clases o selectores aplicados en su documento HTML y manipular los valores.
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
También puede usar JavaScript para crear nuevas variables CSS o eliminarlas por completo.
Por ejemplo:
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
Uso de variables CSS con preprocesadores
El uso de variables dentro de la tecnología frontend se logró inicialmente con preprocesadores CSS como SASS, LESS y Stylus.
El propósito de los preprocesadores de CSS es desarrollar código que amplíe las capacidades fundamentales del CSS estándar. Luego haga que ese código se compile en CSS estándar para que el navegador lo entienda, de forma similar a cómo funciona TypeScript con JavaScript .
Con el desarrollo de variables CSS, los preprocesadores ya no son tan importantes, pero aún pueden ofrecer algún uso si se combinan con variables CSS en su proyecto.
Puede definir una variable SASS $main-color y usarla para establecer el valor de una variable CSS. Luego, use la variable CSS en una clase de estilo normal.
También puede usar funciones SASS para manipular los valores de las variables CSS.
Por ejemplo:
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Aquí, la función SASS lighten() manipula el valor de --primary para obtener un valor para --secundario
Tenga en cuenta que JavaScript no puede acceder a las variables SASS. Entonces, si necesita manipular los valores de sus variables en tiempo de ejecución, debe usar variables CSS.
Al usar variables CSS y preprocesadores juntos, puede aprovechar ambos beneficios, como el uso de potentes funciones de preprocesador como bucles y funciones y funciones de variables CSS como CSS en cascada.
Consejos para el uso de variables CSS en el desarrollo web
Aquí hay algunos consejos importantes para tener en cuenta que lo ayudarán a utilizar mejor las variables CSS.
Comience con una convención de nomenclatura clara
Elija una convención de nomenclatura para sus variables que las haga fáciles de entender y usar. Por ejemplo, use un prefijo como --color- para las variables de color o --spacing- para las variables de espaciado.
Usar variables en consultas de medios
Use variables en las consultas de medios para facilitar el ajuste de su diseño para diferentes tamaños de pantalla.
Aproveche la naturaleza en cascada de CSS
Recuerde que las variables CSS están en cascada, lo que significa que si establece una variable en un elemento principal, afectará a todos sus elementos secundarios.
Use variables CSS con precaución
El uso de demasiadas variables CSS puede causar confusión, así que utilícelas con precaución y solo cuando tenga sentido y mejore la capacidad de mantenimiento de su código.
Pruebe sus variables
Las variables CSS son una forma única de escribir código claro y mantenible dentro de su hoja de estilo.
Es importante tener en cuenta que todavía no son totalmente compatibles con todos los navegadores. Por lo tanto, debe probar la compatibilidad de sus variables con el navegador para asegurarse de que funcionen como se espera y que los valores alternativos funcionen como usted espera.
