Sass+compassという選択肢

Sassにおける@mixinの有用性は前回まででお伝えしましたが、実際に@mixinを設定するのはちょっと面倒だと感じます。
もちろん初めだけというのはわかっているのですが。ノウハウが蓄積すれば自分用@mixinスニペット集なんかを作ると便利でしょう。
そこで、今回はcompassの紹介です。

compassはSassのフレームワークという位置づけです。
フレームワークというと、便利機能集的存在のため、様々な機能が提供される代わりに余計な機能も提供されるデメリットがあります。
しかし、compassの場合はCSSプリプロセッサ―のフレームワークのため、Sassで設定しない限りCSSに余計なセレクタが追加されることはありません。
本当に黒子的存在ですね。

compassの導入方法

既にSassが導入されている前提ですすめます。
Sassの導入がまだの方は以下の記事を参照してください。

『Sass導入と使用方法』

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

以上です。

compassの使用準備

compassを使用するフォルダをまずは作ってください。
最終的にCSSにコンパイルするので、プロジェクトの作業用フォルダという位置づけで問題ないと思います。
ターミナルやCMDで作成したフォルダまでCDで移動してください。
作成したフォルダ上で

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

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

compassのインポート方法

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

@import

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

Sassのコンパイル

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

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

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

このエントリーをはてなブックマークに追加

にほんブログ村 IT技術ブログ IT技術メモへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です