sass(compass)とgruntで複数バリエーションのCSSを同時書き出し

この用途がどれほど必要とされるかはわからないが、今の自分が直面している問題の解決のために必要だったことが、sass(compass)とgruntを使うことでどうにか実現できたので、メモがてら残しておこうと思う。

解決したかったこと

CSS内から呼ぶ画像パスのルートが違うだけの2種類のCSS作成を運用として回さなくてはならなくなったが、パスの修正漏れやそもそも修正の反映漏れ等が懸念される。 それを1度の修正で同時に修正できる様に解決したかった。

準備したもの(以下はすべて Windows7 環境下)

※これらのインストール等は他ブログ等で調べてください。といっても、インストーラーとコマンド3回打つだけですけど、、、

どう実現したか

結論から言うと、sassの変数を利用して画像パスを記述した設定ファイルを2つ作成し、メインとなるsassファイルにそれぞれの設定ファイルを適用してコンパイルするタスクをgruntで作成してwatch、ファイルを修正したら2種類のCSSを自動で書き出すようにした。

ファイル構成

設定ファイルとsass/cssの構成はこんな感じ。

root/
  assets/
    css/
      a/
      b/
    sass/
      _setting/
        _a/
        _b/
      _sass/

Gruntfile.js の設定

grunt.initConfig({
  compass: {
    a: {
      options: {
        sassDir: 'assets/sass/_sass',
        cssDir: 'assets/css/a',
        importPath: 'assets/sass/_setting'
      }
    },
    b: {
      options: {
        sassDir: 'assets/sass/_sass',
        cssDir: 'assets/css/b',
        importPath: 'assets/sass/_setting'
      }
    }
  },
  watch: {
    ...
  }
});

こんな感じで、importPath(compassでのadditional_import_paths) を使って設定ファイルをそれぞれ読み込み、それぞれ用のCSSディレクトリに書き出すことが出来ます。

まとめ

ちょっと特殊な事情の元に試行錯誤の上どうにか辿り着いたこの方法。
一般の用途としては、色設定を複数作ってテーマとかのカラーバリエーションを一括作成とかその辺りだろうか。

ともあれ、sass(compass)もgruntもともに便利!組み合わせることで更なる可能性も感じた。

気の向くままに何かを綴っていこうと・・・

なんとなしにブログを始めてみた。

 

書けることといったらウェブのフロントエンド周りなので、

その辺に関してメモレベルだろうけどなにか書いていけたらと。

 

言語

開発環境・ツール

  • windows7 - work
  • Mac Book Air - private
  • Sublime Text 2
  • Git
  • sass / compass
  • grunt