Convert Sass Colour Maps to Json for Fractal

This library will convert a SASS/SCSS color map into a JSON file for the sole purpose of being used for a Fractal styleguide.

The format of the color map can only include HEX values, lighten/darken, and references to other variables are not supported.

Install

$ npm install --save sass-maps-to-json -D

This script can be used as part of a gulp task, or standalone as a script you run from the command line.

Parameters

| Name | Type | Description | | ---------------- | ------------------ | ------------- | | src | string | A string containing a path to the input file. | dest | string | JSON file destination |

Usage - Option 1 - Gulp task

Example (as a gulp task):

var gulp = require('gulp');
var sassMapToJson = require('sass-maps-to-json');
gulp.task('sassToJson', function() {
   var settings = {
      "src": "sass/settings/_colors.scss",
      "dest": "colors.config.json"
    };
   sassMapToJson(settings);
});  

Usage - Option 2 - NPM task

Create a js file in your project (convertsass.js in this example)

var sassMapToJson = require('sass-maps-to-json');
   var settings = {
      "src": "sass/settings/_colors.scss",
      "dest": "colors.config.json"
};  
sassMapToJson(settings);

Then in your package.json file create a script that will execute this:

  "scripts": {
    "convert-sass": "node convertsass.js"
  },

Input:

$palette: (
    red: (
        light: #fff2f1,
        mid: #ff7369,
        dark: #c90d00
    ),
    blue: (
        lightest: #5e7298,
        light: #404d69
    ),
    black: #000,
    white: #fff,
    grey: #333
)!default;

Output:

{
  "context": {
    "colors": {
      "Red": {
        "swatches": [
          {
            "name": "light",
            "groupcollated": "(red, light)",
            "hex": "#fff2f1"
          },
          {
            "name": "mid",
            "groupcollated": "(red, mid)",
            "hex": "#ff7369"
          },
          {
            "name": "dark",
            "groupcollated": "(red, dark)",
            "hex": "#c90d00"
          }
        ]
      },
      "Blue": {
        "swatches": [
          {
            "name": "lightest",
            "groupcollated": "(blue, lightest)",
            "hex": "#5e7298"
          },
          {
            "name": "light",
            "groupcollated": "(blue, light)",
            "hex": "#404d69"
          }
        ]
      },
      "Other": {
        "swatches": [
          {
            "name": "black",
            "hex": "#000"
          },
          {
            "name": "white",
            "hex": "#fff"
          },
          {
            "name": "grey",
            "hex": "#333"
          }
        ]
      }
    }
  }
}

Fractal Usage

The drive for this script was to create as much of a "live" styleguide as possible, and we use Fractal to generate a static site in our build process from our up to date sass files. Fractal uses handlebars.js as a template engine.

I have included an example in the fractal_examples directory of this project which should help get you up and running. The file will output a section with named title for each group containing the colour name, and hex value

Changelog

v1.1.0 - 08-Aug-2018

• Updated output. Swatch now outputs name and groupcollated as well as the hex value

v1.0.1 - 07-Aug-2018

• Docs update

v1.0.0 - 06-Aug-2018

• initial release