You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

sass-variable-parser

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

sass-variable-parser

Sass variable parser and webpack loader


Version published
Maintainers
1
Created

Readme

Source

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.

Table Of Contents

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.

OptionDefaultDescription
camelCasetrueWhether to camelize variable names
cwdWebpack's context when used as loaderCurrent working directory from which @import paths are calculated. Typically not needed when used as loader
indentedfalseWhether the loaded sass is in indented syntax or not. When used as loader is auto-calculated from file extension

Contributing

The project is created with typescript-starter. Check out it's README for more info.

License

MIT (http://www.opensource.org/licenses/mit-license.php)

Keywords

FAQs

Package last updated on 22 Nov 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc