Sass JSON Vars

@import json data into Sass $variables.

Important: the latest version of sass-rails is locked in to Sass 3.2. This means that Sass maps are not available to sass-json-vars to parse nested objects.

Usage

gem install sass-json-vars

After that reload rails server if you are on rails.

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

What about node-sass?

Take a look at node-sass-json-importer for a libsass variant of this project:

https://github.com/Updater/node-sass-json-importer