Conseguir que JavaScript sea compatible con CSS y Sass

JavaScript y CSS conviven desde hace más de 20 años. Y, sin embargo, ha sido notablemente difícil compartir datos entre ellos. Ha habido grandes intentos, claro. Pero tengo algo simple e intuitivo en mente: algo que no implica un cambio estructural, sino más bien poner en uso propiedades personalizadas de CSS e incluso variables Sass.

Propiedades personalizadas de CSS y JavaScript

Las propiedades personalizadas no deben ser tan sorprendentes aquí. Una cosa que siempre han podido hacer desde que los navegadores comenzaron a admitirlos es trabajar junto con JavaScript para establecer y manipular los valores.

Sin embargo, específicamente, podemos usar JavaScript con propiedades personalizadas de varias maneras. Podemos establecer el valor de una propiedad personalizada usando setProperty:

document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px

También podemos recuperar variables CSS usando getComputedStyleJavaScript. La lógica detrás de esto es bastante simple: las propiedades personalizadas son parte del estilo y, por lo tanto, son parte del estilo calculado.

getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px

El mismo tipo de trato con getPropertyValue. Eso nos permite obtener el valor de la propiedad personalizada de un estilo incorporado del marcado HTML.

document.documentElement.style.getPropertyValue("--padding'"); // 124px

Tenga en cuenta que las propiedades personalizadas tienen un alcance. Esto significa que necesitamos obtener estilos calculados a partir de un elemento en particular. Como definimos previamente nuestra variable, :rootlas obtenemos en el elemento HTML.

Variables descargadas y JavaScript

Sass es un lenguaje de preprocesamiento, lo que significa que se convierte en CSS antes de que forme parte de un sitio web. Por esa razón, no es posible acceder a ellos desde JavaScript de la misma manera que a las propiedades personalizadas de CSS, a las que se puede acceder en el DOM como estilos calculados.

Necesitamos modificar nuestro proceso de construcción para cambiar esto. Dudo que no haya una gran necesidad de esto en la mayoría de los casos, ya que los cargadores a menudo ya forman parte de un proceso de compilación. Pero si ese no es el caso en su proyecto, necesitamos tres módulos que sean capaces de importar y construir módulos Sass.

Así es como se ve en la configuración de un paquete web:

module.exports = { // ... module: {  rules: [   {    test: /.scss$/,    use: ["style-loader", "css-loader", "sass-loader"]   },   // ...  ] }};

Para que las variables Sass (o, específicamente, SCSS en este caso) estén disponibles para JavaScript, necesitamos “exportarlas”.

// variables.scss$primary-color: #fe4e5e;$background-color: #fefefe;$padding: 124px;:export {  primaryColor: $primary-color;  backgroundColor: $background-color;  padding: $padding;}

El :exportbloque es la salsa mágica que utiliza el paquete web para importar las variables. Lo bueno de este enfoque es que podemos cambiar el nombre de las variables usando la sintaxis de camelCase y elegir lo que exponenmos.

Luego importamos el archivo Sass ( variables.scss) a JavaScript, dándonos acceso a las variables definidas en el archivo.

import variables from './variables.scss';/* {  primaryColor: "#fe4e5e"  backgroundColor: "#fefefe"  padding: "124px" }*/document.getElementById("app").style.padding = variables.padding;

Existen algunas restricciones en la :exportsintaxis que vale la pena mencionar:

• Debe estar en el nivel superior pero puede estar en cualquier parte del archivo.
• Si hay más de uno en un archivo, las claves y los valores se combinan y exportan juntos.
• Si un particular exportedKeyestá duplicado, el último (en el orden de origen) tiene prioridad.
• An exportedValuepuede contener cualquier carácter que sea válido en los valores de declaración CSS (incluidos los espacios).
• exportedValueNo es necesario citar an porque ya se trata como una cadena literal.

Hay muchas formas en las que tener acceso a las variables Sass en JavaScript puede resultar útil. Tiendo a recurrir a este enfoque para compartir puntos de interrupción. Aquí está mi breakpoints.scsarchivo, que luego importo en JavaScript para poder usar el matchMedia()método para tener puntos de interrupción consistentes.

// Sass variables that define breakpoint values$breakpoints: (  mobile: 375px,  tablet: 768px,  // etc.);// Sass variables for writing out media queries$media: (  mobile: '(max-width: #{map-get($breakpoints, mobile)})',  tablet: '(max-width: #{map-get($breakpoints, tablet)})',  // etc.);// The export module that makes Sass variables accessible in JavaScript:export {  breakpointMobile: unquote(map-get($media, mobile));  breakpointTablet: unquote(map-get($media, tablet));  // etc.}

Las animaciones son otro caso de uso. La duración de una animación generalmente se almacena en CSS, pero es necesario realizar animaciones más complejas con la ayuda de JavaScript.

// animation.scss$global-animation-duration: 300ms;$global-animation-easing: ease-in-out;:export {  animationDuration: strip-unit($global-animation-duration);  animationEasing: $global-animation-easing;}

Observe que utiliza una strip-unitfunción personalizada al exportar la variable. Esto me permite analizar fácilmente cosas en el lado de JavaScript.

// main.jsdocument.getElementById('image').animate([  { transform: 'scale(1)', opacity: 1, offset: 0 },  { transform: 'scale(.6)', opacity: .6, offset: 1 }], {  duration: Number(variables.animationDuration),  easing: variables.animationEasing,});

Me hace feliz poder intercambiar datos entre CSS, Sass y JavaScript con tanta facilidad. Compartir variables como esta hace que el código sea simple y SECO.

Por supuesto, existen múltiples formas de lograr el mismo tipo de cosas. Les James compartió un enfoque interesante en 2017 que permite que Sass y JavaScript interactúen a través de JSON. Puede que sea parcial, pero creo que el enfoque que cubrimos aquí es el más simple e intuitivo. No requiere cambios locos en la forma en que ya usa y escribe CSS y JavaScript.

¿Existen otros enfoques que podrían estar utilizando en alguna parte? Compártelos aquí en los comentarios. Me encantaría ver cómo lo estás resolviendo.