是否可以编写（通过 sass 命令或编译器指令）代码，使 SASS 将所有变量的最终值输出到 JSON 文件？

Question

如何编译 SASS 文件并让它输出 json 文件中每个变量的所有最终值我之前问过一个类似的问题，这里有人认为我是想让你们做我的工作。在我走上一条最终会浪费时间的道路之前，我只是想看看是否有可能。如果可以的话，我不知道魔法酱能上手吗

我有基于 bootstrap-sass 和其他 sass 框架构建的 CMS 主题，我希望我的 CMS 能够访问我们使用的变量在 SASS 文件中也是如此。在我看来，如果当我编译 SAAS 文件时，我得到一个 CSS、MAP 和 JSON 文件，我就已经准备好了。

我可以把它写成某种混入，但即便如此，我也需要能够得到

所有变量的列表
一个命令输出json到dist文件夹

如有任何关于这些项目的指点，我们将不胜感激。

Answer 1

如果你正在使用Gulp编译你的SASS有一个插件可以完成这个。

https://www.npmjs.com/package/gulp-sass-json

安装后，给出如下 Gulpfile.js:

var sassJson = require('gulp-sass-json');

var paths = {
    'json_root' : './bundles/theme/scss/variables/*.scss', 
    'json_dest' : './json'
};

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

gulp.task('sass-json', function () {
    return gulp
        .src(paths.json_root)
        .pipe(sassJson())
        .pipe(gulp.dest(paths.json_dest));
});

gulp.task('default', ['sass-json']);

给定 SCSS 文件 variables/colors.scss:

$red: #ed1414;
$blue: #0351e0;
$green: #259208;

在 ./json/colors.json

输出以下json

{
    "red": "#ed1414",
    "blue": "#0351e0",
    "green": "#259208"
}

因此，为了让它在每次编译时重新输出，您可以创建一个包含此任务以及正常样式编译任务的任务。

是否可以编写（通过 sass 命令或编译器指令）代码，使 SASS 将所有变量的最终值输出到 JSON 文件？

Is it possible to write (via sass commands or compiler directives) code such that SASS will output the final values of all variables to a JSON file?

sass

compass-sass