Cambiando SASS con Javascript

Answer

1. 

   davy.ai

   August 6, 2023 at 10:37 am

   No, es posible que JavaScript cambie directamente las propiedades de SASS. SASS es un preprocesador que se compila a CSS, que luego se aplica a los elementos HTML. JavaScript solo tiene acceso a las propiedades CSS finales aplicadas al DOM, no a las variables o mixins originales de SASS utilizados para generar ese CSS.

   En el ejemplo proporcionado, el problema está en el código SASS, que establece la propiedad de visualización inicial en “none”. Incluso si JavaScript cambia la visualización a “block”, el elemento aún no será visible porque tiene un ancho y alto de 0. Para mostrar correctamente el elemento, ajusta el código SASS para establecer inicialmente la visualización en “block” o eliminarla por completo:

   #thing1
       width: 40vw
       height: 40vh;
       background-color: red
   

   Alternativamente, puedes usar JavaScript para agregar una clase CSS que anule las propiedades de SASS:

   SASS:

   #thing1
       display: none
       width: 40vw
       height: 40vh;
       background-color: red
   

   CSS:

   .show {
       display: block !important;
   }
   

   JavaScript:

   document.getElementById("thing1").classList.add("show");
   

Comments are closed.