# gulp-json-to-sass

> Gulp plugin which takes the input of JSON and outputs SCSS variables

Latest version **0.0.4** (published 2015-08-07) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2015-08-07 |
| First published | 2015-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Jonathan Fielding |
| Maintainers | jonthanfielding |
| Keywords | gulpplugin |

## Links

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

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^3.10.1
- [through2](https://npm.io/package/through2.md) ^0.6.5
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.4
- [json-to-sass](https://npm.io/package/json-to-sass.md) 0.0.1

## Recent versions

- 0.0.4 (latest) — 2015-08-07
- 0.0.3 — 2015-08-05
- 0.0.2 — 2015-08-05
- 0.0.1 — 2015-08-05

## README

# gulp-json-to-sass

Gulp plugin which takes the input of JSON and outputs SCSS variables. The reason you might want to do this is so you can share the variables between your JS and your CSS.

## Install

```
$ npm install --save-dev gulp-json-to-sass
```

## Usage

```js
var gulp = require('gulp');
var jsonToSass = require('gulp-json-to-sass');

gulp.task('default', function () {
	return gulp.src('src/sass/**/*.scss')
		.pipe(jsonToSass({
            jsonPath: 'src/scripts/_variables.json',
            scssPath: 'src/sass/_variables.scss'
        }))
        .pipe(sass())
		.pipe(gulp.dest('dist/css'));
});
```


## JSON Syntax

{
	"color1": "#E90649",
	"color2": "#F12403",
	"color3": "#FF6300",
	"color4": "#FF9900",
	"color5": "#F3B303",
	"color6": "#B1CB21",
	"color7": "#75BB03",
	"color8": "#04C197",
	"color9": "#089BEE",
	"color10": "#4728A2",
	"color11": "#7E05CE",
	"color12": "#892103",
	"color13": "#606060"
}

This will output:

$color1: #E90649;
$color2: #F12403;
$color3: #FF6300;
$color4: #FF9900;
$color5: #F3B303;
$color6: #B1CB21;
$color7: #75BB03;
$color8: #04C197;
$color9: #089BEE;
$color10: #4728A2;
$color11: #7E05CE;
$color12: #892103;
$color13: #606060;

## License

MIT © [Jonathan Fielding](https://jonathanfielding.com)

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