Question

是否可以将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中使用相同的东西吗？

Answer 1

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

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

Answer 2

至少还有其他两种解决方案：

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

将数据从JSON解析到SCSS

2 个答案: