Sass+compassという選択肢

Sassにおける@mixinの有用性は前回まででお伝えしましたが、実際に@mixinを設定するのはちょっと面倒だと感じます。

もちろん初めだけというのはわかっているのですが。ノウハウが蓄積すれば自分用@mixinスニペット集なんかを作ると便利でしょうね。

そこで、今回はcompassの紹介です。

compassはSassのフレームワークという位置づけです。

フレームワークというと、便利機能集的存在のため、様々な機能が提供される代わりに余計な機能も提供されるデメリットがあります。

しかし、compassの場合はCSSプリプロセッサ―のフレームワークのため、Sassで設定しない限りCSSに余計なセレクタが追加されることはありません。

本当に黒子的存在ですね。

compassの導入方法

既にSassが導入されている前提ですすめます。

Sassの導入がまだの方は以下の記事を参照してください。

『Sass導入と使用方法』

Macの場合はターミナルで、Winの場合はCMDより以下をたたいてください。

gem install compass

以上です。

compassの使用準備

compassを使用するフォルダをまずは作ってください。

最終的にCSSにコンパイルするので、プロジェクトの作業用フォルダという位置づけで問題ないと思います。

ターミナルやCMDで作成したフォルダまでCDで移動してください。

作成したフォルダ上で

compass create

と入力するとcompassのファイルが自動生成されます。

├─ config.rb
├─ sass
│├─ ie.scss
│├─ print.scss
│├─ screen.scss
├─ stylesheets
│├─ ie.css
│├─ print.css
└─ screen.css

compassのインポート方法

SCSSファイルのインポートとまったく同じで

@import

でできるそうです。まだ試していないので、実際に利用したら詳細を書きます。

Sassのコンパイル

コンパイルする場合は、いままでは

sass --watch style.scss:style.css

とコンパイル前のSCSSファイルとコンパイルするCSSを指定する必要がありますが、compassの場合は

compass watch

と入力するだけで、自動でコンパイルされます。