How to Import Variables from JavaScript to SASS or Vice Versa

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

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

How to share value from js object to sass variable in react-js?

Using javascript you can not change the value of scss files because scss is compiled into css in the server and then sent to the client where the javascript is executed.

However you can achieve that via css variables (more here).
You could use css variables with a default value and then change the value of the variable via JS.

How can I use Sass variables in a JavaScript function?

Just seen this earlier this morning here: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json

First you need to include: https://github.com/vigetlabs/sass-json-vars

Install the gem:

gem install sass-json-vars

Place the variables in a json file

// variables.json
{
    "font-sans": "Helvetica, sans-serif",
    "colors": {
        "red": "#c33"
    }
}

Import the file in Sass to expose variable names:

@import "variables.json"

body {
    color: map-get($colors, red);
    font: $font-sans;
}

Require sass-json-vars when compiling

sass style.scss -r sass-json-vars

---

Related Topics