Is there a way to import variables from javascript to sass or vice versa?

Question

I am making a css grid system that relies on the concept of blocks. So I have a base file like:

$max-columns: 4; $block-width: 220px; $block-height: 150px; $block-margin: 10px; 

And it is used by a mixin:

@mixin block ($rows, $columns, $max-columns) {   display: block;   float: left;   margin: $block-margin 0 0 $block-margin;   box-sizing: border-box;   width: ($block-width * $columns) - $block-margin; } 

But I'd also like javascript to have access to the variables in the base file. I was thinking that I could make an invisible div, and give it the $block-width, $block-height, and $block-margin attributes and pull the values from there. But max-columns, doesn't map to anything directly, so I'd have to come up with a hacky way to render it in a div. Is there a cleaner way to share values from sass/css to javascript or vice versa?

Answer 1

If you use webpack you can use sass-loader to exportvariables like:

$animation-length-ms: $animation-length + 0ms;  :export {   animationMillis: $animation-length-ms; } 

and import them like

import styles from '../styles/animation.scss'     const millis = parseInt(styles.animationMillis) 

https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/