gulp-json-data-to-sass

1.0.1 • Public • Published

gulp-json-data-to-sass

Gulp plugin which takes the input of JSON File(s) and outputs SCSS variables. This shoul help you to share Variables between e.g. JS and your CSS.

Install

npm install --save-dev gulp-json-data-to-sass

Quick-Start

let gulp = require('gulp'),
    jsonToSass = require('gulp-json-data-to-sass');
 
gulp.task('build:variables', () => {
    return gulp.src('src/conf/**/*.json')
        .pipe(jsonToSass({
            sass: 'src/sass/_variables.scss',
            prefix: '',
            suffix: '',
            separator: '-'
        }));
});

Options

name description type
sass path of SASS file to be generated. {String}
prefix Optional prefix to be used for all variables. {String}
suffix Optional suffix to be used for all variables. {String}
separator Separator to be used for combining the variable(s), prefix and suffix. {String}

JSON Syntax

{
    "primary": "#EEE",
    "secondary": "#121212",
    "border": {
        "top": "2px",
        "right": "2px",
        "bottom": "0",
        "left": "0"
    }
}

This will output:

$primary: #EEE;
$secondary: #121212;
$border-top: 2px;
$border-right: 2px;
$border-bottom: 0;
$border-left: 0;

License

Apache-2.0 Steffen Flohrer

Package Sidebar

Install

npm i gulp-json-data-to-sass

Weekly Downloads

259

Version

1.0.1

License

Apache-2.0

Unpacked Size

17.8 kB

Total Files

5

Last publish

Collaborators

  • qm-b