# sass-maps-to-json

> Convert SCSS (or SASS) maps to JSON format for use in Fractal.

Latest version **1.5.0** (published 2022-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install sass-maps-to-json
pnpm add sass-maps-to-json
yarn add sass-maps-to-json
bun add sass-maps-to-json
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2022-08-10 |
| First published | 2018-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ryan Bendel |
| Maintainers | ryanbendel |
| Keywords | Fractal, Sass Map, SCSS-to-Json, Sass map to JSON |

## Links

- npm: https://www.npmjs.com/package/sass-maps-to-json
- Repository: https://github.com/ryanbendel/sass-maps-to-json
- Homepage: https://github.com/ryanbendel/sass-maps-to-json#readme
- Issues: https://github.com/ryanbendel/sass-maps-to-json/issues
- npm.io page: https://npm.io/package/sass-maps-to-json

## Dependencies (3)

- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [jsonfile](https://npm.io/package/jsonfile.md) ^6.1.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.5.0 (latest) — 2022-08-10
- 1.4.0 — 2022-08-10
- 1.3.0 — 2022-06-16
- 1.2.0 — 2020-07-20
- 1.1.1 — 2019-02-19
- 1.1.0 — 2018-08-08
- 1.0.1 — 2018-08-06
- 1.0.0 — 2018-08-06

## README

# Convert Sass Colour Maps to Json for Fractal [![NPM version][npm-image]][npm-url]

This library will convert a SASS/SCSS color map into a JSON file for the sole purpose of being used for a Fractal styleguide.

The format of the color map can only include HEX values, lighten/darken, and references to other variables are not supported.

## Install

```
$ npm install --save sass-maps-to-json -D
```

This script can be used as part of a gulp task, or standalone as a script you run from the command line.


### Parameters

| Name             | Type               | Description   |
| ---------------- | ------------------ | ------------- |
| src              | `string`           | A string containing a path to the input file.
| dest             | `string`           | JSON file destination |  

---

#### Usage - Option 1 - Gulp task


Example (as a gulp task):

```js
var gulp = require('gulp');
var sassMapToJson = require('sass-maps-to-json');
gulp.task('sassToJson', function() {
   var settings = {
      "src": "sass/settings/_colors.scss",
      "dest": "colors.config.json"
    };
   sassMapToJson(settings);
});  
```
#### Usage - Option 2 - NPM task

Create a js file in your project (convertsass.js in this example)
```js
var sassMapToJson = require('sass-maps-to-json');
   var settings = {
      "src": "sass/settings/_colors.scss",
      "dest": "colors.config.json"
};  
sassMapToJson(settings);
```

Then in your package.json file create a script that will execute this:
```json
  "scripts": {
    "convert-sass": "node convertsass.js"
  },
```

##### Input:
```scss
$palette: (
    red: (
        light: #fff2f1,
        mid: #ff7369,
        dark: #c90d00
    ),
    blue: (
        lightest: #5e7298,
        light: #404d69
    ),
    black: #000,
    white: #fff,
    grey: #333
)!default;
```
##### Output:
```json
{
  "context": {
    "colors": {
      "Red": {
        "swatches": [
          {
            "name": "light",
            "groupcollated": "(red, light)",
            "hex": "#fff2f1"
          },
          {
            "name": "mid",
            "groupcollated": "(red, mid)",
            "hex": "#ff7369"
          },
          {
            "name": "dark",
            "groupcollated": "(red, dark)",
            "hex": "#c90d00"
          }
        ]
      },
      "Blue": {
        "swatches": [
          {
            "name": "lightest",
            "groupcollated": "(blue, lightest)",
            "hex": "#5e7298"
          },
          {
            "name": "light",
            "groupcollated": "(blue, light)",
            "hex": "#404d69"
          }
        ]
      },
      "Other": {
        "swatches": [
          {
            "name": "black",
            "hex": "#000"
          },
          {
            "name": "white",
            "hex": "#fff"
          },
          {
            "name": "grey",
            "hex": "#333"
          }
        ]
      }
    }
  }
}
```
### Fractal Usage

The drive for this script was to create as much of a "live" styleguide as possible, and we use [Fractal][fractal-url] to generate a static site in our build process from our up to date sass files.
Fractal uses `handlebars.js` as a template engine.

I have included an example in the `fractal_examples` directory of this project which should help get you up and running. The file will output a section with named title for each group containing the colour name, and hex value

## Changelog
 **v1.1.0 - 08-Aug-2018** 
 - Updated output. Swatch now outputs `name` and `groupcollated` as well as the hex value
 
 **v1.0.1 - 07-Aug-2018** 
 - Docs update
 
 **v1.0.0 - 06-Aug-2018** 
 - initial release


[npm-url]: https://www.npmjs.com/package/sass-maps-to-json
[npm-image]: https://img.shields.io/npm/v/sass-maps-to-json.svg
[fractal-url]: https://fractal.build

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