mstroiu
mstroiu

Reputation: 342

Parse data from JSON to SCSS

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

Answers (2)

RiZKiT
RiZKiT

Reputation: 2501

There are at least two other solutions:

Upvotes: 2

allejo
allejo

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

Related Questions