Patternlab-scssvariables NPM

Component: SCSS Variables

Convert SCSS (or SASS) files to YAML or JSON files which can be read by your component guide (eg Pattern-lab, Fractal). The default mode will just include all variable - value pairs into a Yaml file. The color mode supports Lighten, Darken, Tint and Shade as it converts these values to hex so patternlab can display them.

Referencing variables inside variables is supported, as long as this variable is in the same file. combining variables from multiple files is not supported.

Install

$ npm install --save patternlab-scssvariables

Usage

Example:

var scssVariables = require('patternlab-scssvariables');

 var settings = {
    "src": "icons/_variables.scss",
    "dest": "icons-variables.yml"
  };

  scssVariables(settings);

Colors Specific usage:

 var settings = {
    "src": "colors/_variables.scss",
    "dest": "colors-variables.yml"
  };

  scssVariables.color(settings);

Fractal Usage (will output the items under 'context' instead of 'items'):

 var settings = {
    "src": "icons/_variables.scss",
    "dest": "icons-variables.json",
    "type": "fractal"
  };

  scssVariables(settings);

Input:

$white: #fff;
$black: #000;
$valid-color--light: #cbf1ab; 

$test: tint(#BADA55, 42%);
$test: shade(#663399, 42%);

$colours: (
    red: (
        light: #fff2f1,
        mid: #ff7369,
        dark: #c90d00
    ),
    blue: (
    lightest: #5e7298,
    light: #404d69
    )
);

Output:

items:
    - name: $white
      value: '#fff'
    - name: $black
      value: '#000'
    - name: $valid-color--light
      value: '#cbf1ab'
    - name: $test
      value: '#e2efb7'
    - name: $test
      value: '#2a1540'
    - name: $colours.red.light
      value: '#fff2f1'
    - name: $colours.red.mid
      value: '#ff7369'
    - name: $colours.red.dark
      value: '#c90d00'
    - name: $colours.blue.lightest
      value: '#5e7298'
    - name: $colours.blue.light
      value: '#404d69'

Options

Name	Type	Description
src	`string`	A string containing a path to the input file.
dest	`string`	file destination, can be yml, yaml or json
description	`string`	Optional description to include in the file
type	`string`	set to Fractal to enable fractal support