Getting JavaScript to Talk to CSS and Sass|CSS-Tricks

JavaScript and CSS have actually lived beside one another for upwards of 20 years. And yet it’s been extremely tough to share information in between them. There have been big efforts, sure. However, I have something simple and instinctive in mind– something not including a structural change, however rather putting CSS custom residential or commercial properties and even Sass variables to utilize.

CSS custom-made properties and JavaScript

Customized homes shouldn’t be all that unexpected here. Something they have actually constantly been able to do considering that web browsers started supporting them is work along with JavaScript to set and control the values.

Particularly, however, we can utilize JavaScript with custom-made homes in a few ways. We can set the worth of a custom-made home utilizing setProperty:

We can also recover CSS variables using in JavaScript. The reasoning behind this is fairly basic: custom-made residential or commercial properties belong to the design, therefore, they belong to computed style.

Very same sort of deal with getPropertyValue. That let us get the custom-made residential or commercial property value from an inlined style from HTML markup.

Keep in mind that customized residential or commercial properties are scoped. This implies we need to get computed styles from a particular aspect. As we formerly specified our variable in : root we get them on the HTML component.

Sass variables and JavaScript

Sass is a pre-processing language, suggesting it’s developed into CSS before it ever is a part of a site. For that reason, accessing them from JavaScript in the same method as CSS custom-made residential or commercial properties– which are available in the DOM as computed styles– is not possible.

We need to customize our build procedure to alter this. I doubt there isn’t a big requirement for this in many cases since loaders are often currently part of a construct process. But if that’s not the case in your project, we need three modules that are capable of importing and equating Sass modules.

Here’s how that looks in a webpack configuration:

To make Sass (or, particularly, SCSS in this case) variables available to JavaScript, we require to “export” them.

The : export block is the magic sauce webpack utilizes to import the variables. What is great about this approach is that we can relabel the variables using camelCase syntax and select what we expose.

We import the Sass file (variables.scss) file into JavaScript, providing us access to the variables specified in the file.

There are some constraints on the : export syntax that deserve calling out:

There are lots of ways having access to Sass variables in JavaScript can be available in helpful. I tend to grab this method for sharing breakpoints. Here is my breakpoints.scs file, which I later import in JavaScript so I can use the matchMedia() technique to have consistent breakpoints.

Animations are another usage case. The period of an animation is typically saved in CSS, however more intricate animations require to be finished with JavaScript’s assistance.

Notification that I utilize a custom-made function when exporting the variable. This allows me to quickly parse things on the JavaScript side.

It makes me pleased that I can exchange information in between CSS, Sass and JavaScript so quickly. Sharing variables like this makes code easy and DRY.

There are several ways to attain the exact same sort of thing, obviously. Les James shared a fascinating method in 2017 that allows Sass and JavaScript to connect by means of JSON. I might be biased, however I find the approach we covered here to be the most basic and most instinctive. It does not need crazy modifications to the method you currently use and write CSS and JavaScript.

Are there other approaches that you might be using someplace? Share them here in the remarks– I ‘d enjoy to see how you’re solving it.