# sass-variable-parser

> Sass variable parser and webpack loader

Latest version **1.2.2** (published 2018-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install sass-variable-parser
pnpm add sass-variable-parser
yarn add sass-variable-parser
bun add sass-variable-parser
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2018-11-22 |
| First published | 2018-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.9 |
| Dependencies | 8 |
| Unpacked size | 25.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Oleg Maslov |
| Maintainers | mleg |
| Keywords | sass, variable, loader |

## Links

- npm: https://www.npmjs.com/package/sass-variable-parser
- Repository: https://github.com/mleg/sass-variable-parser
- Homepage: https://github.com/mleg/sass-variable-parser#readme
- Issues: https://github.com/mleg/sass-variable-parser/issues
- npm.io page: https://npm.io/package/sass-variable-parser

## Dependencies (8)

- [css](https://npm.io/package/css.md) ^2.2.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.10
- [webpack](https://npm.io/package/webpack.md) ^4.17.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.9.3
- [handlebars](https://npm.io/package/handlebars.md) ^4.0.11
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [@types/webpack](https://npm.io/package/@types/webpack.md) ^4.4.10
- [strip-json-comments](https://npm.io/package/strip-json-comments.md) ^2.0.1

## Recent versions

- 1.2.2 (latest) — 2018-11-22
- 1.2.1 — 2018-09-06
- 1.2.0 — 2018-08-23
- 1.1.6 — 2018-07-11
- 1.1.5 — 2018-04-16
- 1.1.4 — 2018-03-20
- 1.1.3 — 2018-03-19
- 1.1.2 — 2018-03-16
- 1.1.1 — 2018-03-16
- 1.1.0 — 2018-03-16
- 1.0.3 — 2018-03-15
- 1.0.2 — 2018-03-15
- 1.0.1 — 2018-03-14
- 1.0.0 — 2018-03-14

## README

# 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](https://github.com/sass/node-sass) and returns the result as a Javascript **object**.

It was initially a fork of [sass-variable-loader](https://github.com/nordnet/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](#options).
* Returns only variables from the _imported file itself_, but follows `@import`s to evaluate dependent values.
* Supports both **scss** and **indented** syntax.
* Written in strict **Typescript**.
* **Reliable**. Thoroughly tested.

## Table Of Contents

- [Sass variable parser and loader for webpack](#sass-variable-parser-and-loader-for-webpack)
  - [Features](#features)
  - [Table Of Contents](#table-of-contents)
  - [Result example](#result-example)
  - [Installation](#installation)
  - [Usage as a Webpack loader](#usage-as-a-webpack-loader)
  - [Usage as a parser](#usage-as-a-parser)
  - [Options](#options)
  - [Contributing](#contributing)
  - [License](#license)

## Result example

```javascript
{
  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.

```javascript
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:

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

## Usage as a parser

```javascript
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:

```javascript
{
  "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](https://github.com/webpack/loader-utils#parsequery)).

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 |

## Contributing

The project is created with [typescript-starter](https://github.com/bitjson/typescript-starter).
Check out it's README for more info.

## License

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

---
_Source: https://npm.io/package/sass-variable-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._