Sass-variable-parser NPM

Sass variable parser and loader for webpack

Works as a Webpack loader or can be used as parser in Node.js

Parses variables from sass, evaluates their values with node-sass and returns the result as a Javascript object.

It was initially a fork of sass-variable-loader, but is completely rewritten: major bugs fixed, added maps support, elabortate tests with real world Sass included. Thanks for the directions anyway!

Features

Returns only top-level variables (obviously).
Emits both "plain" variables and maps. Maps are represented as nested objects.
By default "camelizes" variable names. Can be changed through options.
Returns only variables from the imported file itself, but follows @imports to evaluate dependent values.
Supports both scss and indented syntax.
Written in strict Typescript.
Reliable. Thoroughly tested.

Sass variable parser and loader for webpack

Result example

{
  tagColor: "#409EFF",
  tagBorder: "rgba(64, 158, 255, 0.2)",
  tagBorderRadius: "4px",
  someMap: {
    key1: "value1",
    key2: "value2"
  }
}

Installation

npm i sass-variable-parser -D

Usage as a Webpack loader

No need to touch webpack config. Loaders can be used inline. Just install devDependency and go ahead. Two exclamation marks disable for this import all loaders and preloaders specified in the webpack configuration.

import variables from '!!sass-variable-parser!./_variables.scss';
// => returns all the variables in _variables.scss as an object with each variable name camelCased

Without camel-casing:

import variables from '!!sass-variable-parser?-camelCase!./_variables.scss';

Usage as a parser

const path = require('path');
const { parse } = require('sass-variable-parser');

const options = {
  // defaults to true
  camelCase: false,
  // optional, only if there are @imports with relative paths
  cwd: path.resolve(__dirname, 'node_modules/bulma/sass/utilities'),
  // true means indented sass syntax, defaults to false ('scss' syntax)
  indented: true,
};

const variables = parse(
  `
@import "initial-variables.sass"

$primary: $turquoise !default
$info: $cyan !default

$family-primary: $family-monospace`,
  options
);

variables would be:

{
  "primary": "#00d1b2",
  "info": "#209cee",
  "family-primary": "monospace"
}

Check out src/spec folder for more exmaples

Options

When using as a loader pass through query string (see how).

When using as a parser pass options object as the second parameter to parse method.

Option	Default	Description
camelCase	true	Whether to camelize variable names
cwd	Webpack's context when used as loader	Current working directory from which @import paths are calculated. Typically not needed when used as loader
indented	false	Whether the loaded sass is in indented syntax or not. When used as loader is auto-calculated from file extension