あ、どうも。おはようございます。
本格的に大型連休ということですので巷でちょくちょく耳にする、「SASS」とか「SCSS」とか「COMPASS」というものに挑戦してみました。

参考にした記事

CSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIG

CSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIG

はてブ数

http://liginc.co.jp/designer/archives/11623

一体どこまで便利なのか、文字でずらずら書いてもしょうがないので、百聞は一見に如かずということで、簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意しておきましたので、まずはこれを見てみてみよ!

scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 : ホホ冢次男

scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 : ホホ冢次男

はてブ数

http://hayashikejinan.com/webwork/239/

連休中にテーマを作ろうそうしよう。あ、ついでにscssってのとcompassってのがなんかどうも便利っぽいのでちょっと調べてみよっかな。から始まって。結論から言うと「狂おしいほど便利で今までぼくは何をしてたんだ」というレベルでした。

Sass、そしてSassy CSS (SCSS)

Sass、そしてSassy CSS (SCSS)

はてブ数

http://hail2u.net/documents/sass-and-sassy-css.html

CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)の良さを解説する。

web帳 | CSSライブラリ化? Sass(scss)のインストール方法 mac

web帳 | CSSライブラリ化? Sass(scss)のインストール方法 mac

はてブ数

http://www.webcyou.com/?p=1220

Sassのインストール、使い方を紹介していこうと思っております。

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp

はてブ数

http://howtohp.com/css/compass.html

SASSはSASSとSCSSという二つの文法が使えるCSSプリプロセッサで、CompassはSASSの機能を少し拡張したものになります。Compassをインストールすると自動的にSASSもインストールされますので、実際の中身は完全にSASSに依存していますよ。

OK.把握。SASSについての情報を知りたい方は、上の記事に目を通していただければ大体どんなものか掴めるかと思います。ここから下はボクが実際に使ってみた感想みたいなものなので。

昔の人が百聞は一見に如かずと

と、いうわけでぼくもこのブログのCSSをCompassで書いてみることにしました。

何の調整もしていないと5,000行近くあったのでちょっと骨の折れる作業でしたが。途中でなんとかメゲズにやり遂げました。

その結果

サンプル
これが こう
サンプル
これが こう
サンプル
これが こう
サンプル
これが こう

CSSを入れ子にして記述できるので、「これの中のこれのここをこうする」が読みやすく、かつ打ち込む量が全然違う。生産性アップに繋がります。

でもしかし

既存のソースをCompassの記述に変えていってもその恩恵はあまり…。せっかく把握していたソースコードの大体の位置が入れ替わるわけですからね。頭の整理が大変。
がっつり使うなら構造から見直すべきかと。

次、何かをつくる時に使えば、Compassの記述に最適化した形で書いていけるのでその恩恵を授かれるかなと思います。