Jeremy Smith Jeremy Smith - 1 month ago 8
Sass (Sass) Question

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

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

You can read the sass file with a server side script, "parse" it and echo the values you need to javascript.