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>
<htmlidioma="es">
<cabeza>
<título>Variables CSS - Variaciones de botonestítulo>
<enlacereal="hoja de estilo"href="Variables.css" />
cabeza>
<cuerpo>
<división>
<h1>Variables CSS
h1>
<división>
CSS:
.btn {
relleno: 1movimiento rápido del ojo 1.5rem;
fondo: transparente;
peso de fuente: 700;
color rojo;
}
Así es como debería verse tu página:
El .btn La clase 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:
:raíz{
/*variable CSS*/
--variable_name: valor;
}
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á el var() propiedad:
:raíz {
/*variable CSS*/
--primario: #900c3f;
--secundario: #ff5733;
}.btn {
relleno: 1movimiento rápido del ojo 1.5rem;
fondo: transparente;
peso de fuente: 700;
color: variable(--primario);
color de fondo: variable(--secundario);
}
.sub-primario {
color: variable(--secundario);
color de fondo: variable(--primario);
}
El selector raíz contiene dos variables: --primario y --secundario. Luego se sustituyen ambas variables en el .btn class 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.
El var() La propiedad 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:
:raíz {
--primario: #900c3f;
--secundario: #ff5733;
}
.btn {
relleno: 1movimiento rápido del ojo 1.5rem;
fondo: transparente;
peso de fuente: 700;
color: variable(--primario, azul);
}
En este ejemplo, sustituya el --primario variable en color estilo. 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 persistir los cambios.
Aquí hay un ejemplo de cómo usar JavaScript para actualizar el valor de una variable CSS.
HTML:
html>
<htmlidioma="es">
<cabeza>
<título>Variables CSS - Variaciones de botonestítulo>
<enlacereal="hoja de estilo"href="Variables.css" />
<guion>
funcióncambiarColor() {
// Obtenga el elemento en el que desea cambiar la variable
constante miElemento = documento.querySelector(":raíz");// Obtener el valor actual de la variable
dejar currentValue = getComputedStyle (myElement).getPropertyValue(
"--secundario"
);
// Colocar el nuevovalorpara el variable
miElemento.estilo.setProperty("--secundario", "#DAF7A6");
}
guion>
cabeza>
<cuerpo>
<división>
<h1>Variables CSSh1>
<división>
CSS:
:raíz {
--primario: #900c3f;
--secundario: #ff5733;
}.btn {
relleno: 1movimiento rápido del ojo 1.5rem;
fondo: transparente;
peso de fuente: 700;
}
.sub-primario {
color: variable(--primario);
color de fondo: variable(--secundario);
}
En este código JavaScript, el cambiarColor() La función actualiza el color del primer botón cuando el usuario hace clic en él.
Usando Métodos transversales 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:
// Crear a nuevovariable
documento.documentElement.style.setProperty('--color nuevo', 'azul');
// Eliminar una variable
documento.documentElement.style.removeProperty('--color nuevo');
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, como 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 $color-principal y utilícelo para establecer el valor de una variable CSS. Luego, use la variable CSS en una clase de estilo regular.
También puede usar funciones SASS para manipular los valores de las variables CSS.
Por ejemplo:
:raíz {
--primario: $color-principal;
--secundario: aligerar(variable(--primario), 20%);
}
.btn {
color: variable(--primario);
color de fondo: variable(--secundario);
}
Aquí, la función SASS aligerar() manipula el valor de --primario para obtener un valor de --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.
Usando variables CSS y preprocesadores juntos, puede aprovechar ambos beneficios, como usar 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, utilice un prefijo como --color- para variables de color o --espaciado- para variables de espaciado.
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.