Reputation: 342
Is possible to feed JSON data to SCSS ?
Currently I'm using jade as a template engine and I use data from a json file, achieving that using gulp-data.
My gulp task is the following:
gulp.task('partials', function () {
"use strict";
return gulp.src(['dev/templates/*.jade', '!dev/templates/partials/**/*.jade'])
.pipe(data(function (file) {
return JSON.parse(
fs.readFileSync('./dev/data/globals.json')
);
}))
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('dev/'))
// Notify browserSync
// to refresh
.pipe(browserSync.reload({
stream: true
}));
});
And using the data from the json file like this: #{example.test.name}
Is possible to use the same thing in SCSS ?
Upvotes: 1
Views: 7753
Reputation: 2501
There are at least two other solutions:
Upvotes: 2
Reputation: 2203
There's no way to directly handle JSON with SCSS alone. Since you're already using Gulp, you can use an third-party tool such as eyeglass or sassport to convert JSON into a SCSS hash. Another tool available is json-sass, which you can use standalone.
If you're not using Gulp, then you would have to rely on Gem based converters but they don't seem to be actively maintained:
Upvotes: 4