Recently I was working on building a new website and found that I wanted to be able to access my Sass variables directly from within my JavaScript.

Being able to share Sass variables with my JavaScript becomes important when we start using Isomorphic/Universal JavaScript as we might want to output some of the values in our templates. A good example is when using the <picture> element, we might want to output a picture element which uses identical breakpoints to our CSS.

The problem is that JavaScript will not natively parse your Sass variables file but after a quick Google search I was able to find a ruby library which allows you to use a JSON file of variables within your Sass.  Unfortunately, like most developers I know these days, I am using libscss to compile my .scss files so using this Ruby library was not an option. It did inspire me however, giving me the idea that I could use a tool that took a JSON file and converted it into a format Sass could understand. With this in mind I thought, someone else must have had this idea so I did a quick search on NPM to see if there was anything that did this but turned up nothing (a rare occurrence as NPM has practically everything you can imagine).

I therefore decided to stop procrastinating with searches and to build something myself, the result was 2 tools. A CLI which converts a JSON file of variables to SASS, and then a Gulp plugin that wraps the functionality of the CLI into something that can be part of a build step.

With these tools, as a developer you have the option to simply use the command line tool to generate your Sass variables from a JSON file or you can automate this as part of your Gulp build pipeline by using the Gulp plugin.

For the following tutorial I am going to use the command line tool. To get started you will need to install the json-to-scss command line tool, to do this  open up your terminal and run the command:

npm install json-to-sass -g

The next step is to write a JSON file of variables, this is as simple as defining properties for each variable and then defining a value. For this example we will save our our file as variables.json.

{
    "xs-max-width": "479px",
    "sm-min-width": "480px",
    "sm-max-width": "767px",
    "md-min-width": "768px",
    "md-max-width": "979px",
    "lg-min-width": "980px",
    "lg-max-width": "1199px",
    "xl-min-width": "1200px"
}

Having setup our JSON file, we now can run the json-to-sass cli tool, passing it the name of your file and the name of the .scss file you wish to generate.

json-to-sass variables.json _variables.scss

If all has gone well you should get a lovely message “Written output to sass”. You should now be able to see Sass file, opening it in your text editor will result in the following:

$xs-max-width: 479px;
$sm-min-width: 480px;
$sm-max-width: 767px;
$md-min-width: 768px;
$md-max-width: 979px;
$lg-min-width: 980px;
$lg-max-width: 1199px;
$xl-min-width: 1200px;

So now you have a JSON file which can be compiled into Sass which you can then import into your other Sass documents. You can then load the JSON file in your JavaScript and use the variables however you want.

So this has been a brief introduction to sharing variables between your Sass and JavaScript. If you want to automate this compilation process simply use the gulp json-to-scss plugin instead, full documentation is available on NPM.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more