doc.documentElement.fashion.setProperty(“–padding”, 124 + “px”); // 124px
getComputedStyle(doc.documentElement).getPropertyValue(‘–padding’) // 124px
Similar kind of take care of getPropertyValue. That permit us get the customized property worth from an inlined fashion from HTML markup.
doc.documentElement.fashion.getPropertyValue(“–padding'”); // 124px
Be aware that customized properties are scoped. This implies we have to get computed kinds from a specific aspect. As we beforehand outlined our variable in :root we get them on the HTML aspect.
We have to modify our construct course of to vary this. I doubt there isn’t an enormous want for this typically since loaders are sometimes already a part of a construct course of. But when that’s not the case in your venture, we want three modules which can be able to importing and translating Sass modules.
Right here’s how that appears in a webpack configuration:
module.exports = ;
The :export block is the magic sauce webpack makes use of to import the variables. What is good about this strategy is that we are able to rename the variables utilizing camelCase syntax and select what we expose.
import variables from ‘./variables.scss’;
doc.getElementById(“app”).fashion.padding = variables.padding;
There are some restrictions on the :export syntax which can be price calling out:
It have to be on the high stage however might be wherever within the file.If there may be a couple of in a file, the keys and values are mixed and exported collectively.If a specific exportedKey is duplicated, the final one (within the supply order) takes priority.An exportedValue could include any character that’s legitimate in CSS declaration values (together with areas).An exportedValue doesn’t must be quoted as a result of it’s already handled as a literal string.
// Sass variables that outline breakpoint values
// and many others.
// Sass variables for writing out media queries
cell: ‘(max-width: #map-get($breakpoints, cell))’,
pill: ‘(max-width: #)’,
// and many others.
// most important.js
transform: ‘scale(1)’, opacity: 1, offset: 0 ,
Are there different approaches that you just is likely to be utilizing someplace? Share them right here within the feedback — I’d like to see the way you’re fixing it.