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.
Install it from NPM
$ npm install -g sass-export
Ready to export:
$ sass-export scss/config/*.scss -o exported-sass-array.json
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" }
]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
output exported-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" }
]
}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;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)"
}
}For mixins and functions we've added a reserved 'mixins' group for it.
input: _mixins.scss
@mixin box($p1, $p2) {
@content;
}
@function my-function($val) {
}
@mixin z($val: 10px, $p2: '#COFF33') {
@content;
}
@mixin no-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": []
}
]
}Just import it!
Require syntax:
var exporter = require('sass-export').exporter;
var exporterBuffer = require('sass-export').buffer;import syntax:
import { exporter } from 'sass-export';Written using ES5 syntax.
var exporter = require('sass-export').exporter;
//basic options
var options = {
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: []}
var asObject = exporter(options).getStructured();
console.log(asObject.globals);
console.log(asObject.colors);
// or get an array [{}, {}]
var asArray = exporter(options).getArray();
console.log(asArray)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: 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. |
- Gulp plugin: gulp-sass-export
- Include/Exclude annotations.
- Demo Page
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!
- Fork this project.
- Create a feature branch.
- Submit a pull request.
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
ISC