title: Importing JSON into Sass and looping through an array
body: <p>I have a JSON file containing the following:</p>
  
  <pre><code>{
  "colors": [
      {
          "name": "red",
          "hex": "#c33"
      },
      {
          "name": "blue",
          "hex": "#2f2"
      },
      {
          "name": "green",
          "hex": "#22f"
      }
  ]
  </code></pre>
  
  <p>}</p>
  
  <p>The JSON needs to be in an array [] as I'm also using the same JSON for creating Handlebars templates and Handlebars seems to require the JSON to be like this(unless there's a way to get Handlebars to do otherwise?).</p>
  
  <p>I'm using sass-json-vars to import the JSON file into my SASS :</p>
  
  <pre><code>@import 'variables.json';
  </code></pre>
  
  <p>Then what I want to do is loop through the JSON to create a list of SASS variables based on the values and names in the JSON.</p>
  
  <p>So far the closest I can get is something like this:</p>
  
  <pre><code>@each $id, $val in $colors {
  
      @each $idB, $valB in $val {
          body {
              color: $idB;
          } 
      }
  }
  </code></pre>
  
  <p>This is giving me both key and value:</p>
  
  <pre><code>body {
      color: #22f;
  }
  
  body {
      color: hex;
  }
  </code></pre>
  
  <p>Which is obviously no good.</p>
  
  <p>I can't find a way to use dot notation or something similar to reference the value matching a key and nesting loops like the above doesn't seem to work.</p>
  
  <p>The kind of output in SASS i'm after is:</p>
  
  <pre><code>$red : #c33;
  $blue : #2f2;
  ... etc
  </code></pre>
  
  <p>Can anyone help?</p>