Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Lee mas. 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. googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1494450502098-primis’); }); Cómo definir y utilizar 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:       Variables CSS – Variaciones de botones                  Variables CSS              Primario        Secundario             CSS: .btn { relleno: 1rem 1.5rem; fondo: transparente; peso de fuente: 700; color: red;} Este es el aspecto que debería tener su página: La clase .btn utilizada en la hoja de estilo anterior no es dinámica y le obliga a crear 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 la 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: 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 las variables sean accesibles por todo el documento HTML a escala global. Para sustituir la variable en su estilo CSS, utilizará la propiedad var(): :root { /* variable CSS*/ –principal: #900c3f; –secundario: #ff5733;}.btn { relleno: 1rem 1.5rem; fondo: transparente; peso de fuente: 700; color: var(–primario); color de fondo: var(–secundario);}.sub-primario { color: var(–secundario); 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; –secundario: #ff5733;}.btn { relleno: 1rem 1.5rem; fondo: transparente; peso de fuente: 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 con JavaScript puede ser una forma poderosa de cambiar la apariencia de su sitio web sobre la marcha. Con 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:       Variables CSS – Variaciones de botones            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”https://www.Bocah Handal/css-variables-how-use-pro/,”#DAF7A6”);    }                  Variables CSS              Primario      Secundario       CSS: :root { –primary: #900c3f; –secundario: #ff5733;}.btn { relleno: 1rem 1.5rem; fondo: transparente; font-weight: 700;}.sub-primary { color: var(–primary); color de fondo: var(–secundario);} 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 DOM, puede acceder a las clases o selectores aplicados en su documento HTML y manipule 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 una nueva variabledocument.documentElement.style.setProperty(‘ –nuevo-color’, ‘azul’);// Eliminar una variabledocument.documentElement.style.removeProperty(‘–nuevo-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 CSS es desarrollar código que amplíe las capacidades fundamentales del CSS estándar. Luego, compile ese código en CSS estándar para que el navegador lo entienda, de forma similar a como funciona TypeScript con JavaScript. Con el desarrollo de las variables CSS, los preprocesadores ya no son tan importantes, pero aún pueden ofrecer algún uso si se combinan con 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 regular. También puede usar funciones SASS para manipular los valores de las variables CSS. Por ejemplo: :root { –primary: $main-color; –secundario: aclarar(var(–primario), 20%);}.btn { color: var(–primario); color de fondo: var(–secundario);} 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 usar potentes funciones de preprocesador como bucles y funciones y funciones de variables CSS como CSS en cascada Sugerencias para el uso de variables CSS en el desarrollo web Aquí hay algunas sugerencias 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.Use variables en consultas de mediosUse variables en consultas de medios para facilitar el ajuste de su diseño para diferentes tamaños de pantalla.Aproveche las Naturaleza en cascada de CSSRecuerde 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. cuando tiene sentido y mejora 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. Read Now