compassで運用しての感想。

itinao 20:25 , 0 件のコメント
現在筆者が担当している案件ではcompassを使って運用していて、 数千行レベルのcssを300ファイル・スプライト画像を300個ぐらい生成しています。 異常に規模が大きい。 今回は、使ってみての感想を大雑把に書いていきます。 のちのち掘り下げて書いていこうかなーと思います。

compassとは

cssを生成するメタ言語であるsassをサポートするツールのこと。ざっくり言うと。 くわしくは、この辺り読むとわかるかも。 CSSの常識が変わる！「Compass」、基礎から応用まで！
http://liginc.co.jp/designer/archives/11623

 Sass を使うなら、Compass も使うと便利 http://wp.graphact.com/2012/01/13/sass-compass

運用しての感想

1. ソースの整理が楽！
ソース整理が楽っていうのは下記の存在がデカイ。 これはプログラマがソースの管理してるからっていうのがあるかも。 @import 
⇒ scssファイル共通のモジュールとか作れる。
(各機能共通のcssはモジュールに書くといい)
@include 
⇒ 共通の関数を作って読み込める。
@extend 
⇒ 特定のセレクタに指定したスタイルを継承することができる。
%name{style}でスタイルを指定して@extend %name;で呼び込めるプレースホルダみたいな機能もある。
2. 画像関連の処理までしてくれるし楽！
画像のサイズを確認して指定することもなくなるし、スプライト画像も作ってくれる。 mixin作るなどして、共通処理をかませていたら書くのはスゴく楽になる。 image-width / image-height 
⇒ 画像の縦横のサイズも自動で測ってくれる
sprite-map 
⇒ スプライト画像も作ってくれる
3. ファイルの命名規則やコーディングルール決めしないと、いろいろ複雑になる…
下記などを参考にして命名規則をつけるなどして案件ルールを作らないと、 すごく複雑なcssが生成されたりして運用中に後悔する。
（運用中に大幅変更することになるかも。 SMACSS http://chroma.hatenablog.com/entry/2013/07/22/120818

 BEM
http://howtohp.com/2013/12/27/sass-bem/
4. コンパイル遅い…
コンパイルは遅い。 数百行程のcssを10ファイルくらい生成するとかであれば全然遅くはないですが、 数千行レベルのcssを300ファイル・スプライト画像を300個ぐらい生成するような案件になると、 コンパイル時間が30分程度かかってしまいます。。つらい。

 とまあ、
cssを生で書くより、はるかに良いです。

 これだけじゃザックリしすぎて何が言いたいのか分かんない！と思うので、
今後具体的に書いていきたいと思います。

 それと、ちょっとcompassをカスタマイズした部分もあるので後に記事にします。
以上！

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )