Rhythm & Biology

Engineering, Science, et al.

gulp-sass-variablesで環境ごとの変数の値を変える

環境によってCSSの中身を切り替えたいということがある。
たとえば、background画像のURLを、開発環境ではローカル、本番環境ではCDNのものにするといった場合である。

gulp-sassを使っている場合は、gulp-sass-variablesを利用するとこれが実現できる。

www.npmjs.com

まず関連パッケージのインストー

$ npm install gulp gulp-sass gulp-sass-variables yargs --save-dev

次にgulpfile.jsを用意。
sassVariablesの部分が今回の重要ポイント。

var gulp = require('gulp'),
    sass = require('gulp-sass')
    sassVariables = require('gulp-sass-variables'),
    argv = require('yargs').argv;

var env = argv.production ? 'production' : 'development';

gulp.task('css', function() {
  gulp.src('src/*.scss')
    .pipe(sassVariables({ $env: env }))
    .pipe(sass())
    .pipe(gulp.dest('dist/'));
});

小さなscssファイルを書いてみる。

$env: 'development' !default;

$color: 'blue' !default;

@if $env == 'production' {
  $color: 'red';
}

h1 {
  background: $color;
}

cssコンパイルして中身を確認する。
blueとredで値が変化していることが分かる。

$ gulp css
$ cat dist/main.css
h1 {
  background: "blue"; }

$ gulp css --production
$ cat dist/main.css
h1 {
  background: "red"; }

変数定義のためのscssファイルを一つ用意して、それを各scssファイルにimportさせるようにすれば便利そう。