Sass: How can I decode JSON file directly into a Sass variable?

Question

Is possible decode a JSON file with Node-Sass?

Ex:

@import "../data/data.json";

I need iterate this data directly into a variable

Any help is welcome :)

Answer 1

sass-json-vars is an excellent gem, but won't work with node-sass (which is a requirement of the original question).

Instead, try node-sass-json-importer, which is essentially the same thing, only re-worked to fit into node-sass's importer api.

Answer 2

There's a gem called Sass JSON Vars that does exactly what you want.

You can install the gem with the following command line code:

gem install sass-json-vars

---

HOW TO USE Sass JSON Vars

For projects using Sass >= 3.3

Place 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

---

For projects using Sass <= 3.2

Place 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: $colors-red;
    font: $font-sans;
}

Require sass-json-vars when compiling:

sass style.scss -r sass-json-vars

---

More info :

• The project's Github page
• Sharing Data Between Sass and JavaScript with JSON