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 :)

`@import "../data/data.json";` is only supposed to be used to import a sass file. why would it magically decode json? try using ruby to decode the json for you then import it into sass. — agconti, Mar 12 '14 at 04:48
@agconti yeahh, my example is a little crazy, but how decoded with ruby? — Raul, Mar 12 '14 at 14:02

score 14 · Answer 1 · answered Sep 16 '15 at 20:01

14

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.

answered Sep 16 '15 at 20:01

Stiggler

John Slegers · Answer 2 · 2016-01-17T17:08:22.233

11

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 :

edited Jan 17 '16 at 17:08

answered Nov 02 '14 at 17:15

John Slegers

How I implement this when using Compass? – Batandwa May 08 '15 at 17:04
@Batandwa : AFAIK, all you need to consider, is which version of Sass you're using. It shouldn't make a difference whether or not you're using Compass. If the procedure described doesn't work for you, you might want to contact the dev team @ http://viget.com/ or open an issue @ https://github.com/vigetlabs/sass-json-vars/issues. – John Slegers May 08 '15 at 19:16
Doesn't parse `.` and `:` (so you can't include urls or references to other assets). Breaks on something like `{ "img": "https://cloudfront.com/foo/bar.jpg" }` – Daniel Lizik Apr 01 '16 at 18:17
@Daniel_L : You should log that as an issue @ https://github.com/vigetlabs/sass-json-vars/issues – John Slegers Apr 01 '16 at 18:20
@JohnSlegers this issue has been open since November haha... https://github.com/vigetlabs/sass-json-vars/issues/23 – Daniel Lizik Apr 01 '16 at 18:37

score 0 · Accepted Answer · edited May 23 '17 at 12:26

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:

And heres one on how to parse json:

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.

@Raul you need to compile Sass with Grunt and require your custom ruby script with `require:’/path/to/script.rb’` (relatively to your project’s root) — Даниил Пронин, Jun 12 '14 at 03:35