Neat Paraskavedekatriaphobia's Meaning

    scsstojson

    1.0.2 • Public • Published

    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!

    Install

    npm i scsstojson

    DownloadsWeekly Downloads

    5

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • evanlovely