6
私はビルドシステムとしてGulpを使用しています。環境変数を使ってsass変数を設定するにはどうしたらいいですか？
// Links to external websites
a[href*='//']:not([href*='example.com']) {
&::after {
content: ' \e895';
font-family: 'Material Icons';
}
}
OR
$baseURL: 'localhost:3000'; // Set this variable based on environment
a[href*='//']:not([href*='#{$baseurl}']) {
...
}
は私がルール以下SCSSと外部のウェブサイトを指すリンクを特定する必要がありますexample.comではなく、localhost:3000です。その結果、Webサイト上の（devサーバ上の）すべてのリンクに小さなアイコンが表示され、リンクが外部のWebサイトに移動していることを示しています。
環境設定に基づいてSCSS変数を設定する最良の方法は何ですか？
編集：
このソリューションは動作しますが、それは私がおよそ野生じゃない一時ファイルを、ご紹介します。私は_variables.scssをscssのルートに移動しました。私はこのファイルを処理し、baseサブディレクトリに出力し、そこでscssをコンパイルします。私は.gitignoreにscss/base/_variables.scssを追加して、バージョン管理にコミットしないようにします。
_variables.scss
$baseURL: '/* @echo PATH */';
Gulpfile.js
// Set baseurl as Sass variable -- used to identify external links
gulp.task('sass-vars', function() {
var baseURL = (config.production) ? 'example.com' : 'localhost:3000';
return gulp.src('./scss/_variables.scss')
.pipe($.preprocess({context: {PATH: baseURL}}))
.pipe(gulp.dest('./scss/base'));
});
見てください：https://github.com/dlmanning/gulp-sass/issues/280 – sobolevn
可能な重複：http://stackoverflow.com/questions/15153613/provide-sass-variables-definitions-on - コマンドライン、http://stackoverflow.com/questions/14506578/use-variable-defined-in-config-rb-in-scss-files – cimmanon
これらのソリューションの両方を可能にする設定ファイルを含むルビー/コンパスを使用あなたはsass環境変数を設定します。私は '_environment.scss'というファイルにそれを分離し、その後、私の' _variables.scss'にそれをインポートして、単に私のビルドステップに追加するものの、 – Roy