SASSがすべての変数の最終値をJSONファイルに出力するように、（sassコマンドまたはコンパイラ指令を使用して）コードを記述できますか？

Question

SASSファイルをコンパイルし、すべての変数の最終値をすべてjsonファイルに出力するにはどうすればいいですか？ 私は以前同様の質問をしています。私は最終的には時間の無駄である道を行く前に、それが可能かどうかをみてみようとしています。可能であれば、私は魔法のソースを知りません。

私はブートストラップ・サス（bootstrap-sass）やその他の嫌なフレームワークに基づいて作成されたCMSテーマを持っており、私のCMSはSASSファイルでも使用する変数にアクセスできるようにしたいと考えています。私がSAASファイルをコンパイルしたときに、CSS、MAP、JSONファイルがあるとすれば、私はすべて設定されるだろうと私には思えます。

私はミックスインのいくつかの種類としてこれを書くことができ、それでも、私は

1. にすべての変数のリストを取得できるようにする必要があると思い
2. distのフォルダに出力JSONへのコマンド。

これらの項目に関するすべての情報がありがとうございます。

Answer 1

あなたがSASSをコンパイルするためにGulpを使用している場合は、これを実行するプラグインがあります。

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

それをインストールした後、そして与えられた以下のSCSSファイルvariables/colors.scss考える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']); 

：

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

を出力し、次のJSO nは./json/colors.json

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

でだから、再出力、それをコンパイルするたびに持つために、あなただけの、この作業だけでなく、あなたの通常のスタイルのコンパイルタスクを含むタスクを作成することができます。