Access JSON data in SASS

#1

Hi all,

Is there any means of accessing the JSON data stored in MIDDLEMAN_ROOT/data within SASS?

As a use-case, I have a standard set of colours that I reference in meta-data.

{
  "deep-sea": "#4D555D",
  "pewter": "#A7AEB5",
  "mist": "#DEE1E2",
  "moonlight": "#E8EDF1",
  "stratosphere": "#5184BE",
  "mustard": "#E0C360",
  "emerald": "#7BAF5C",
  "pomegranate": "#BD4242"
}

In SASS, I’d like to inject into a map, as per below:

$colors: (deep-sea: #4D555D, pewter: #A7AEB5, mist: #DEE1E2, moonlight: #E8EDF1, stratosphere: #5184BE, mustard: #E0C360, emerald: #7BAF5C, pomegranate: #BD4242)

Traditionally, with the asset pipeline, you could append .erb and do something like:

$colors: (<%= data.colors.map { |k,v| "#{k}: #{v}" }.join(", ") %>)

But as these are variables that need to be referenced using @import in SASS, it doesn’t work as SASS doesn’t pre-compile from erb and can’t find the file.

Any thoughts would be welcomed.

#2

Maybe give this a try? https://github.com/vigetlabs/sass-json-vars Otherwise, jettison the JSON, and just declare these as SASS variables directly.

#3

Take a look at my reply here, buddy: Pass erb from partials into sass (file)?