あちこちで Sass のエントリーが増えてるので、私の環境も書いてみます。
Sass 使う時、より便利になる Compass というフレームワークを一緒に使っています。
Compass って？
便利だなと思う機能満載なフレームワークで、これも一緒に使うことで Sass がさらに簡単になったり使い勝手がパワーアップしたりします。具体的に例をあげたほうが分かりやすいと思うので、いくつか書いてみます。
Compass はいろいろな Mixin が含まれている
@import “compass”; で呼び出して使えます。自分で書かなくていいから楽ちん。
@import "compass";
.ex1 {
@include clearfix;
}
.ex2 {
@include border-radius(5px);
}
.ex3 {
@include opacity(0.5);
}
↓
.ex1 {
overflow: hidden;
*zoom: 1;
}
.ex2 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.ex3 {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
他にどんなものがあるかは、「Compass Core Framework | Compass Documentation」を見ると分かります。
監視も簡単、流用も簡単
Sass では、.scss を監視して .css を書き出す場合以下のような感じですが、
sass --watch test.scss:test.css
Compass だと、config.rb という設定ファイルをルートに置いておけば
watch compass
これだけで OK。
config.rb の内容は以下のようにしてます。ここで書き出す css や scss のディレクトリや、書き出し方法など指定しています。
http_path = "/" css_dir = "css" sass_dir = "_scss" images_dir = "/" javascripts_dir = "js" output_style = :expanded line_comments = false
watch compass すら打つのが面倒なので（というか忘れちゃうので…）、バッチファイルを作ってます。
compass_start.bat とかそんな感じの名前で、以下の内容を保存。
watch compass
bat ファイルをダブルクリックすることでコマンドプロンプトが立ち上がり、watch が始まります。Ctrl＋C で watch は止められます。
このあたりは、「Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design」を参考にさせていただいてます。
htdocs 内に config.rb と start.bat を置いてみた図。
一度、下図のようにサイトスケルトン（テンプレート）を作成してしまえばあとは使い回せるので便利です。
画像の縦横 px を取得でき、計算に使える
Compass は 画像のサイズも取得できます。ちょっと凄い。
img ディレクトリに 150*150 の 150.jpg がある場合、
width: image-width("img/150.jpg") - 0px;
min-width: image-width("img/150.jpg") - 20px;
height: image-width("img/150.jpg") - 50px;
↓
width: 150px; min-width: 130px; height: 100px;
これは素敵だなーと思ってます。詳しくは「Compass Image Dimension Helpers | Compass Documentation」。
その他の機能
他にも CSS スプライト用の画像を書き出せたりまでするようです。凄い。
参考：簡単に使える Compass のオススメ機能 – log
インストール
紹介はこれくらいにして、じゃあどうやって使うの？ということで。
まず、Ruby のインストールをする必要があります。以前書いたエントリー「Windows に Ruby と RubyGems を入れる | Numb.」を見て Ruby と RubyGems を入れてください。
Ruby を入れたら、以下のように打っていきます。
gem のアップデート
gem update --system
Sass のインストール
gem install sass
Compass のインストール
gem install compass
これだけです。
注意点
htdocs は、日本語の入るパスに置くとうまく動きません。そこだけ注意が必要。
Compass 便利ですので、ちょっとでも気になったようでしたら是非 :)