将数据从 JSON 解析为 SCSS答案

【问题标题】：Parse data from JSON to SCSS将数据从 JSON 解析为 SCSS
【发布时间】：2016-09-13 14:52:23
【问题描述】：

可以将 JSON 数据提供给 SCSS 吗？

目前我使用jade作为模板引擎，我使用json文件中的数据，使用gulp-data实现。

我的 gulp 任务如下：

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
    }));
});

并像这样使用 json 文件中的数据：#{example.test.name}

是否可以在 SCSS 中使用相同的东西？

【问题讨论】：

标签： json parsing compilation sass pug

【解决方案1】：

没有办法单独使用 SCSS 直接处理 JSON。由于您已经在使用 Gulp，您可以使用第三方工具，例如 eyeglass 或 sassport 将 JSON 转换为 SCSS 哈希。另一个可用的工具是json-sass，您可以单独使用它。

如果您不使用 Gulp，那么您将不得不依赖基于 Gem 的转换器，但它们似乎没有得到积极维护：

【讨论】：

好的，谢谢。现在我正在使用 gulp-json-to-sass，将所有数据转换为变量，然后在整个 scss 项目中使用它们。

【解决方案2】：

至少还有另外两种解决方案：

将 JSON 转换为 SASS/SCSS 变量：https://github.com/rlapoele/json-to-scss
将 JSON 导入 SASS/SCSS：https://github.com/Updater/node-sass-json-importer

【讨论】：