scss-variable v0.2.3

scss-variable

Generate css variables fro different css pre-processors. Mainly target for scss/sass.

Installation

npm i -D scss-variable
#or
yarn add -D scss-variable

Usage

Assume you have a varaible.js looks like this

module.exports = {
  ns: {
    property: {
      a: "#fff",
      b: "#ccc"
    }
  }
};

Create another scss-variable.js

const path = require("path");
const generateVariable = require("scss-variable");

generateVariable({
  src: path.resolve(__dirname, "path/to/variable.js"),
  dest: path.resolve(__dirname, "path/to/variable.scss")
});

Then run node scss-variable;

Output will look like this

// variable.scss
$ns-property-a: #fff;
$ns-property-b: #ccc;

Advanced usage

Scss map

// in your variable.js
module.exports = {
  _map_: {
    ns: {
      case: {
        "font-size": "12px"
      }
    }
  }
};

Run node scss-variable

Output will look like this

$ns: (
  case: (
    font-size: 12px
  )
);

To use !default

module.exports = {
  _map_: {
    ns: {
      default: true,
      case: {
        "font-size": "12px"
      }
    }
  }
};

Output will look like this

$ns: (
  case: (
    font-size: 12px
  )
) !default;

map will be emitted after variables

You can refer to your variables in your map

Merge

override is used to provide a new object to merge with src

const path = require("path");
const generateVariable = require("scss-variable");

generateVariable({
  src: path.resolve(__dirname, "path/to/variable.js"),
  dest: path.resolve(__dirname, "path/to/variable.scss"),
  override: {
    property: "value"
  }
});

You can merge variables as well as scss map

// in variable.js
module.exports = {
  a: {
    p: "black"
  },
  _map_: {
    ns: {
      case: {
        "font-size": "12px"
      }
    }
  }
};

// in your external override related js
module.exports = {
  a: {
    p: "red"
  },
  _map_: {
    ns: {
      case: {
        "font-size": "14px"
      }
    }
  }
};

// in scss-variable.js
generateVariable({
  src: path.resolve(__dirname, "path/to/variable.js"),
  dest: path.resolve(__dirname, "path/to/variable.scss"),
  override: require("path/to/override/related/js")
});

Output will be:

$a-p: red;
$ns: (
  case: (
    font-size: 12px
  )
);

Viola!

In case you do not like nesting, flatten property key or even flatten map expression are supported

The case above can be rewritten as following

// in your external override related js
module.exports = {
  "a-p": "red",
  "ns.case": {
    "font-size": "14px"
  }
};

Configuration

src

Source of your variable

dest

Where to emit your file. File extension is needed!

In other word, less or other syntax are possible and actually supported

override

Object to override your src

prefix

Default: '$'

String to use to prefix the variable (and map) assignment

Basically works like this

`${prefix}${propertyName}`;

'@' for less variables : )

semi

Default: true

Whether to add semicolon at the end of variable assignment

assignToken

Default: ':'

As the name suggested, used for variable assignment

separator

Default: '-'

String used to concat nested property names

`${property}${separator}${property}`;

mapSeparator

Default: '.'

When you write map structure as a single property in override (ns.a.b.c)

Only useful for override

// in your variable.js

module.exports = {
  _map_: {
    ns: {
      a: {
        b: {
          "font-size": "12px"
        }
      }
    }
  }
};

In your override, you can refer the above map structure as following

`ns${mapSeparator}a${mapSeparator}b`;

mapKey

Default: '_map_'

Key to identify map object

Affected to both src and override

beforeBody

Default: ''

String inserted before generated content

`${beforeBody}\n${generatedContent}`;

afterBody

Default: ''

String inserted after generated content

`${generatedContent}\n${afterBody}`;

watch

Default: false

Watch src to recompile.

merge

Default: lodash.merge

Dangerous area. Function used to merge src and override

Signature should look like Object.assign

TODO

• watch mode
• cli
• webpack-loader