Scss to JSON

Scans *.scss files and turns the information into JSON. Very useful with Pattern Lab as you can auto-matically update your styleguide with your styles.

Install

npm install --save scsstojson

Usage

var scssToJson = require('scsstojson');
 
var items = [
  {
    "src": "src/0-base/00-colors/_colors.scss",
    "dest": "patternlab/source/_patterns/0-base/00-colors/colors.json",
    "lineStartsWith": "$c-",
    "allowVarValues": false
  }, {
    "src": "src/0-base/00-fonts/_fonts.scss",
    "dest": "patternlab/source/_patterns/0-base/00-fonts/fonts.json",
    "lineStartsWith": "$font-",
    "allowVarValues": false
  }
];
 
var options = {}; // no options yet, but they'll go here eventually
 
scssToJson(items, options, function() {
  console.log('all done!');
});

If _colors.scss looks like this:

$c-gray--lightest: hsl(0, 0%, 87%);
$c-gray--lighter: hsl(0, 0%, 74%);
$c-gray--light: hsl(0, 0%, 60%);
$c-gray: hsl(0, 0%, 48%);
$c-gray--dark: hsl(0, 0%, 40%);
$c-gray--darker: hsl(0, 0%, 26%);
$c-gray--darkest: hsl(0, 0%, 13%);
 
$c-blue: hsl(193, 79%, 42%);
 
$c-green: hsl(89, 46%, 16%);
$c-orange: hsl(18, 73%, 53%);
$c-yellow: hsl(43, 100%, 74%);
$c-orange--light: hsl(31, 98%, 70%);
 
$c-border: $c-gray;

It would output this for colors.json:

{
  "items": [
    {
      "name": "$c-gray--lightest",
      "value": "hsl(0, 0%, 87%)",
      "comment": ""
    },
    {
      "name": "$c-gray--lighter",
      "value": "hsl(0, 0%, 74%)",
      "comment": ""
    },
    {
      "name": "$c-gray--light",
      "value": "hsl(0, 0%, 60%)",
      "comment": ""
    },
    {
      "name": "$c-gray",
      "value": "hsl(0, 0%, 48%)",
      "comment": ""
    },
    {
      "name": "$c-gray--dark",
      "value": "hsl(0, 0%, 40%)",
      "comment": "Favorite Gray"
    },
    {
      "name": "$c-gray--darker",
      "value": "hsl(0, 0%, 26%)",
      "comment": ""
    },
    {
      "name": "$c-gray--darkest",
      "value": "hsl(0, 0%, 13%)",
      "comment": ""
    },
    {
      "name": "$c-blue",
      "value": "hsl(193, 79%, 42%)",
      "comment": "Primary Color"
    },
    {
      "name": "$c-green",
      "value": "hsl(89, 46%, 16%)",
      "comment": "Secondary Color"
    },
    {
      "name": "$c-orange",
      "value": "hsl(18, 73%, 53%)",
      "comment": ""
    },
    {
      "name": "$c-yellow",
      "value": "hsl(43, 100%, 74%)",
      "comment": ""
    },
    {
      "name": "$c-orange--light",
      "value": "hsl(31, 98%, 70%)",
      "comment": ""
    }
  ],
  "meta": {
    "description": "To add to these items, use Sass variables that start with <code>$c-</code> in <code>src/0-base/00-colors/_colors.scss</code>"
  }
}

And then you can have this as your Twig Pattern Lab pattern file right next to the colors.json:

<ul class="sg-colors">
  {% for item in items %}
    <li>
      <div class="sg-swatch" style="background: {{item.value}};"></div>
      <div class="sg-info">
        <span>{{item.value}}</span> <br/>
        <code>{{item.name}}</code>
        {% if item.comment %}<div class="comment">{{ item.comment }}</div>{% endif %}
      </div>
    </li>
  {% endfor %}
</ul>
{% if meta %}
  <p> <small>{{ meta.description }}</small> </p>
{% endif %}

Enjoy!