Importing JSON

[super-cache-money]

Can I import variables defined in a JSON file? This is great for DRY purposes, as often I need to share variables with other languages (like javascript). I know there are ad-hoc ways of achieving this but I guess what I'm asking is - should it not be built in?

[lolmaus]

As a Compass user, i would do it from the config.rb: just have it read the JSON with Ruby and expose the data into Sass via a custom Sass function.

If you're not using Compass, you could probably do the same by requiring a Ruby file via the -r command line flag.

[chriseppstein]

There are Sass extensions that provide this. It is not something that we will be putting into the Sass core functions.

https://github.com/HugoGiraudel/SassyJSON
https://github.com/scottdavis/serialy-sassy

[esr360]

@chriseppstein before I open a new bug for this, please would you share the reasons for not putting this into the Sass core functionality?

The alternatives you provided are totally not suitable for any serious project (in fairness to you, you posted these over 3 years ago). Today a better alternative would be https://www.npmjs.com/package/node-sass-json-importer, but even still this doesn't work properly (you cannot just import valid JSON, you must double quote strings, which makes it largely unsuitable) but I digress.

The ability to natively import json into a sass file would be immensely useful, and for peace of mind it would be great to have a proper reason why you won't consider this.

Requiring third party extensions to follow best practices is something I think we should be striving to avoid. Without the ability to import JSON, Sass will eventually die in favour of CSS in JS.

[ArmorDarks]

I'll just leave it here

[esr360]

@ArmorDarks I'm unfortunately too dumb to really understand what that is, other than, presumably, a gate to be able to import JSON files without requiring a third party tool? I will be sure to read into properly, though, so thanks.

[ArmorDarks]

You can define a function, which will read in Node environment JSON data from whatever you want and pass it to the Sass.

Here is example how to pass a function within Grunt, and the function itself, which retrieves data from Grunt (but you can read there external JSON).

[esr360]

Oh ok, that sounds very interesting, thanks for sharing the resources.