gjt

gulp-json-to-sass

Gulp wrapper around json-to-sass

Showing:

Popularity

Downloads/wk

10

GitHub Stars

7

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

4

Size (min+gzip)

43.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial