MacでSCSSを使えるようにする

sassとcompassのインストール

ゴリゴリの作りてがSCSSでゴリゴリやってくれているので、後発ながら自分もインストールしないとダメな季節になってきました。
基本rubyが入っていて、sassがあって、compassがあればCSSのコンパイルができるっていうことになります。MacOSは幸いにしてrubyが入っているので、何もしなくても大丈夫。なのでsassとcompassのインストールっていうことになります。
# su root
# gem install sass
Fetching: sass-3.4.18.gem (100%)
Successfully installed sass-3.4.18
Parsing documentation for sass-3.4.18
Installing ri documentation for sass-3.4.18
1 gem installed

# sass -v
Sass 3.4.18 (Selective Steve)
バージョンは3.4.18がインストールされた。

# gem install compass
Fetching: multi_json-1.11.2.gem (100%)
Successfully installed multi_json-1.11.2
中略
Installing ri documentation for compass-1.0.3
8 gems installed

なんかすごい時間がかかった。一瞬こりゃダメかなって思ったけど全部インストールできたみたいです。

# compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
バージョンは1.0.3がインストールされたみたい。新しいんだか古いんだかわからないです。

SCSSの基本的な使い方

実際に使うのは結構簡単で、
/*SCSS*/
#wapper {
width:100%;
#contents {
&>.clear {
clear:both;
}
}
}

という風に継承してゆくセレクターを入れ子にしてゆきます。CSSではこういう書き方ができないので、並列して書いてゆかないとダメです。ネストできると継承が楽に書けるというわけです。これをCSSに変換すると、
/*CSS*/
#wapper {
width: 100%;
}
#wapper #contents > .clear {
clear: both;
}

従来のCSSになって正しく読み込めるというわけです。
そこまで見ておりませんが、内部的なコンパイルも比較的わかりやすいことになっているかと思われます。コメントアウトなどもCSSと同じルールで使えるし特別こうしないとダメみたいな使い方はないっぽいです。

SCSSをコンパイルしてみる

実際にSCSSをいろいろ書いてCSSにコンパイルするには、config.rbのあるディレクトリに移動して、
$ compass w
とコマンドを打ちます。
modified config.rb
clean css
delete css/style.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
write css/style.css
とかいう感じでCSSが作成されます。
これでプロンプト待ちというかSCSSを保存する度に自動的にCSSがコンパイルされるということになります。保存するたびに保存履歴が増えてゆく感じです。tailの-fオプションみたいな感じですかね。
[Ctrl]+[C]でキャンセルすると、「★★★ Happy Styling! ★★★」と表示されて完了みたいな感じになってます。

実際使ってみるとネストという概念に強いというか理解が深い人には使いやすいんだろうなぁということと、コマンドラインを普段から使っている人にはかなり使いやすい感じなんだろうなぁと思います。
SCSSを使ってなくて、直接CSSを書いちゃう人が制作チームに混じっているとかなり面倒くさいことになるのと、私の場合は外注先のコーダーがSCSS??という感じだったので大規模な開発にも関わらず全くSCSSを使えないという残念な事件があったりといろいろです。
Windowsのメモ帳でWEB製作していた時代から20年近く経っておりますが、すごい進化しましたね。MCVもより本格的になってきたかと。

オンラインで変換できるサービスサイト

SCSSをCSSに変換してくれるサービスサイト
http://sassmeister.com/
CSSをSCSSに変換してくれるサービスサイト ※これはいいかも。
http://css2sass.herokuapp.com/