Sass-Export

Sass-export takes SCSS files and export them to a JSON file you can use as data. This is perfect for generating your site documentation.

CLI

Install it from NPM

$ npm install -g sass-export

Ready to export:

$ sass-export scss/config/*.scss -o exported-sass-array.json

Here's a sample output

input: _variables.css

$gray-medium: #757575;
$base-value: 25px;
$gray-dark: darken($gray-medium, 5%);
$logo: url(logo.svg);
$logo-quotes: url('logo.svg');
$calculation: $base-value-12px;
$multiple-calculations: $base-value-floor(12.5px);

output: exported-sass-array.json

[{"variable": "$gray-medium","value": "#757575","compiledValue": "#757575"},{"variable": "$base-value","value": "25px","compiledValue": "25px"},{"variable": "$gray-dark","value": "darken($gray-medium, 5%)","compiledValue" :"#686868"},{"variable": "$logo","value": "url(logo.svg)","compiledValue": "url(logo.svg)"},{"variable": "$logo-quotes","value": "url('logo.svg')","compiledValue": "url(\"logo.svg\")"},{"variable": "$calculation","value": "$base-value - 12px","compiledValue": "13px"},{"variable": "$multiple-calculations","value": "$base-value - floor(12.5px)","compiledValue": "13px"}]

Section Groups Annotations

You can easily organize your variables into a Javascript object using sass-export annotations:

input: _annotations.scss

$black: #000;
$slate: #8ca5af;
/** * @sass-export-section="brand-colors"*/$brand-gray-light: #eceff1;
$brand-gray-medium: #d6d6d6;
$brand-gray: #b0bec5;
//@end-sass-export-section [optional]/** * @sass-export-section="fonts"*/$font-size: 16px;
$font-color: $brand-gray-medium;
//@end-sass-export-section$global-group: #FF0000;

Then we run sass-export, don't forget to include --structured flag:

$ sass-export scss/_annotations.scss -o exported-grouped.json -s

outputexported-grouped.json

{"globals": [{"variable": "$black","value": "#000","compiledValue": "#000"},{"variable": "$slate","value": "#8ca5af","compiledValue": "#8ca5af"},{"variable": "$global-group","value": "#ff0000","compiledValue": "#ff0000"}],"brand-colors": [{"variable": "$brand-gray-light","value": "#eceff1","compiledValue":"#eceff1"},{"variable": "$brand-gray-medium","value": "#d6d6d6","compiledValue":"#d6d6d6"},{"variable": "$brand-gray","value": "#b0bec5","compiledValue": "#b0bec5"}],"fonts": [{"variable": "$font-size","value": "16px","compiledValue": "16px"},{"variable": "$font-color","value": "$brand-gray-medium","compiledValue":"#d6d6d6"}]}

Include Paths for @import

In order to support @import we need to include --dependencies parameter with a comma separated list of the folder path to include:

$ sass-export scss/_fonts.scss -o=exported-dependencies.json -s -d "src/sass/config/, src/sass/libs/"

in order to use:

@import"breakpoints";
@import"globals";
$imported-value: $bp-desktop;
$font-size: $global-font-size;

Map support

In case you wanted your sass Maps variable to be an array we included te mapValue property for variables identified as maps.

input: _breackpoints.scss

$breakpoints: (
small: 767px,
medium: 992px,
large: 1200px
);

output:exported-maps.json

{"globals": [{"variable": "$breakpoints","value": "(small: 767px,\n medium: 992px,\n large: 1200px\n)","mapValue": [{"variable": "small","value": "767px","compiledValue": "767px"},{"variable": "medium","value": "992px","compiledValue": "992px"},{"variable": "large","value": "1200px","compiledValue": "1200px"}],"compiledValue": "(small:767px,medium:992px,large:1200px)"}}

Mixin/Function support

For mixins and functions we've added a reserved 'mixins' group for it.

input: _mixins.scss

@mixinbox($p1, $p2) {
@content;
}
@functionmy-function($val) {
}
@mixinz($val: 10px, $p2: '#COFF33') {
@content;
}
@mixinno-params() {
}

output:exported-mixins.json

{"mixins": [{"name": "box","parameters": ["$p1","$p2"]},{"name": "my-fucntion","parameters": ["$val"]},{"name": "z","parameters": ["$val: 10px","$p2: '#COFF33'"]},{"name": "no-params","parameters": []}]}

Want to use it in your Node App?

Just import it!

Require syntax:

varexporter=require('sass-export').exporter;varexporterBuffer=require('sass-export').buffer;

import syntax:

import{exporter}from'sass-export';

Example:

Written using ES5 syntax.

varexporter=require('sass-export').exporter;//basic optionsvaroptions={inputFiles: ['_variables.scss','_fonts.scss'],includePaths: ['libs/']// don't forget this is the folder path not the files};// you can get an object {globals:[], colors: []}varasObject=exporter(options).getStructured();console.log(asObject.globals);console.log(asObject.colors);// or get an array [{}, {}]varasArray=exporter(options).getArray();console.log(asArray)

Tech Dependencies

We recommend using Node.js v6+.

Has dependencies on these projects:

• node.js - evented I/O for the backend.
• Node-Sass - library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

Usage

Usage: sass-export [inputFiles] [options]

Options	Type	Description
-o, --output	String	File path where to save the JSON exported.
-s, --structured	Boolean	If it is present, it will output an object structured file instead of a plain array.
-d, --dependencies	String[]	List of dependencies separated by comma, where Sass will try to find the @imports that your inputFiles need to work. Example: "libs/, config/, globals/".
-h, --help	Boolean	Shows up this help screen.

New utilities

• Gulp plugin: gulp-sass-export

More to come soon:

• Include/Exclude annotations.
• Demo Page

Contributing

Please feel free to submit pull requests or open issues to improve this tool. Also keep checking issues section and grab some items to help!

1. Fork this project.
2. Create a feature branch.
3. Submit a pull request.

Development

We use Typescript that compiles to plain javascript.

All you need to start working is:

npm install

Please use build script to compile typescrip to Js:

npm run build

or use the watch script to build your code as you write it:

npm run watch

Please make sure to update the unit test and also make sure all of them are passing:

npm run test

License

ISC