ps

patternlab-scssvariables

Convert SCSS (or SASS) files to patternlab readable YAML files.

Showing:

Popularity

Downloads/wk

6

GitHub Stars

1

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

7

Size (min+gzip)

80.2KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Component: SCSS Variables NPM version

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

NameTypeDescription
srcstringA string containing a path to the input file.
deststringfile destination, can be yml, yaml or json
descriptionstringOptional description to include in the file
typestringset to Fractal to enable fractal support

Changelog

v1.3.0 - 2018-11-15

  • Added Support Fractal
  • Added Support JSON files

v1.2.0 - 2018-07-29

  • Added Support for nested sass maps

v1.1.0 - 2017-11-30

  • Added Support for Lighten and Darken

v1.0.0 - 2017-11-30

  • initial release

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100