読者です 読者をやめる 読者になる 読者になる

compassミニマムスタートの始め方

既存プロジェクトの一部だけにcompassを取り入れてみる。

すでに公開中のサイトにcompassを導入する場合は、sassフォルダに現状のcssをぶち込んでしまえば良い訳ですが、それは一人で管理している場合。

複数人で作業している場合には、全員にcompassに乗り換えてもらわないと行けないので中々めんどうです。。単発のお仕事でキャンペーンページ作成や新機能の追加などの場合は、自分の担当部分だけでもcompassでやりたい!と思うのですが、準備やコミットが面倒くさい事この上ない、、、

ということで、既存のプロジェクトで自分の作業ファイルだけをcompass採用するためのプラクティスです。

メリット

  • 既存のフォルダを汚さない
  • 作業フローがどんな形でもコンフリクトが起きない
  • フォルダの整理などの事前準備が(ほとんど)不要

どうやるの?

  • compassフォルダを追加で作成
  • htmlのcssファイルへのパスを変更
  • compass w実行
  • 実作業
  • 最後にcommpass compile -e production
  • htmlの記述を戻して、納品!

フォルダ構成

作業フォルダ/
 └ css/
 └ img/
 └ compass/
  └ sass/
  └ img/
  └ css/
  └ config.rb

config.rbはこんな感じ

config.rbサンプル @ Gist

やってること

Gruntが書き出すcssを監視して、親ディレクトリ*1cssフォルダに自動的に移動します。

既存のcssファイルに同じ名前の物が有ったら確認メッセージを表示するので、間違って上書きも発生しません。

注意

  • cssで使用している画像の移動は手作業で
  • commpass compile -e production実行時にcssに変更が無いと変換されないので、--forceオプションを付けるか、grunt cleanを実行してから

最後に

compass/*.csscss/に移動させているだけなんですが、そこがコントロールできるのがポイント。 納品やコミット作業のタイミングまでcompass一式を分離しておくので、共有フォルダで他の人と同時に作業していても問題無いですし、間違って関係ないcssを消してしまう事もありません。

また、最初に色々パスを書き換えて、、、的な準備が不要になるので気楽にcompass導入ができるのではないかと。自動化もされるので、なれないフォルダ構成にあたふたする必要もありません。

画像ファイルの移動ややhtmlのcssパスの書き換えは手作用になるのが難点ですが、ミニマムスタートということでこの形式。完全移行か不採用かっていう葛藤ではなく、とりあえず、コスト0でスタートすることは大事だと思うのです。

*1:config.rb中のcss_distination_dirで指定できます