2.0.1 • Public • Published


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.

Build Status npm version Dependency Status

Try it online: Playground (demo)


Install it from NPM

$ npm install -g sass-export

Ready to export:

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

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

  { "name": "$gray-medium", "value": "#757575", "compiledValue": "#757575" },
  { "name": "$base-value", "value": "25px", "compiledValue": "25px" },
  { "name": "$gray-dark", "value": "darken($gray-medium, 5%)", "compiledValue" :"#686868" },
  { "name": "$logo", "value": "url(logo.svg)", "compiledValue": "url(logo.svg)" },
  { "name": "$logo-quotes", "value": "url('logo.svg')", "compiledValue": "url(\"logo.svg\")" },
  { "name": "$calculation", "value": "$base-value - 12px", "compiledValue": "13px" },
  { "name": "$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;

$global-group: #FF0000;

Then we run sass-export:

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

output exported-grouped.json

    "variables": [
        { "name": "$black", "value": "#000", "compiledValue": "#000" },
        { "name": "$slate", "value": "#8ca5af", "compiledValue": "#8ca5af" },
        { "name": "$global-group", "value": "#ff0000", "compiledValue": "#ff0000" }
    "brand-colors": [
        { "name": "$brand-gray-light", "value": "#eceff1", "compiledValue":"#eceff1" },
        { "name": "$brand-gray-medium", "value": "#d6d6d6" ,"compiledValue":"#d6d6d6" },
        { "name": "$brand-gray", "value": "#b0bec5", "compiledValue": "#b0bec5" }
    "fonts": [
        { "name": "$font-size", "value": "16px", "compiledValue": "16px" },
        { "name": "$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  -d "src/sass/config/, src/sass/libs/"

in order to use:

@import "breakpoints";
@import "variables";

$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

  "variables": [
      "name": "$breakpoints",
      "value": "(small: 767px,\n  medium: 992px,\n  large: 1200px\n)",
      "mapValue": [
        { "name": "small", "value": "767px", "compiledValue": "767px" },
        { "name": "medium","value": "992px", "compiledValue": "992px" },
        { "name": "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

@mixin box($p1, $p2) {
@function my-function($val) {
@mixin z($val: 10px, $p2: '#COFF33') {
@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": []

Want to use it in your Node App?

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 {variables:[], colors: []}
var asObject = exporter(options).getStructured();


// or get an array [{}, {}]
var asArray = exporter(options).getArray();

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: sass-export [inputFiles] [options]

Options Type Description
-o, --output String File path where to save the JSON exported.
-a, --array Boolean If it is present, it will output an array file instead of a object structured.
-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/, variables/".
-h, --help Boolean Shows up this help screen.

New utilities


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!

Check our Contributing page for more information.



Package Sidebar


npm i @leipert/sass-export

Weekly Downloads






Unpacked Size

37.8 kB

Total Files


Last publish


  • leipert