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 = ; 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 ;
If _colors.scss
looks like this:
;;;;;;; ; ;;;; ;
It would output this for colors.json
:
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!