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

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

Answer 3

I'm not quite sure how you would do it but here is a great example on how to add custom ruby functions to sass:
https://gist.github.com/chriseppstein/1561650
And heres one on how to parse json:
Parsing a JSON string in Ruby
Maybe after putting them together you could do something like this?
module Sass::Script::Functions
def json(Sass::Script::String)
require 'rubygems'
require 'json'
JSON.parse(string)
end
end
Add it to the end of your config.rb file, and make sure you have json ruby gem installed:
gem install json
and run:
compass compile --force
to get it all to work.
* this is obviously untested and doesn't work, but it might help you get where you need to go.