デザイン力とかCSS力が足りないので今年はそこら辺を強化しようとおもっているんだが、CSS拡張メタ言語のいいところは、先人の知恵をライブラリとして取り込んでコモディティ化できることかなと思っている。
既にhail2u.netでも書かれていた
様々なところで公開されているCSSのエッセンスを取り込んだ自分なりのCSS製作環境を構築するというような利用の仕方もできる。つまりはこれこそが必要とされていたスタイルシート言語ということなのではないか。Sass、そしてSassy CSS (SCSS)
Stylus(そしてnib)は構文が好みなんだけど、ユーザーの層が薄いのでとりあえずはSassに入門してみることにした。
インストール
Rubyはrbenvで入れてあるので
$ gem update --system $ gem install sass $ gem install compass
でok
Sassを学ぶ
ちょっと前にズルいStylus書いててStylusの構文というかそういったあたりのmix-inとかは理解しているので、構文はチュートリアルをざっと読めば理解できた。大体似たような構文だけどsigilがperl風味。
StylusがpythonっぽいとするならLESSとかSass(Scss)はperlとかrubyっぽい。そう考えるとsassはインデントでネストを表現するperlみたいな印象を受けるのでちょっと気持ち悪いし、Stylusのほうがスッキリしていて綺麗に見えるのは納得できる。だったらsassじゃなくてscssで書いたほうがいいかなぁとも思う。
次に、CSS Preprocessor Advent Calendar 2012を読めばよい。これでかなり理解が深まるが、特にOOCSSとSassは構造化の観点からCSSを考える上で非常に参考になる。
cssはクラスベースというよりはプロトタイプベースの継承って考えたほうがしっくりくるかもしれんなぁと思った。spineのextendとincludeと似たような感じだしねー。
あとは次のスライドを読めばいいですね。
Emacsの設定
M-x list-packagesからscss-modeをインストールする。
これはデフォルトで保存時にコンパイルが走ってうざいのと、インデントが4文字スペースなのでscss-mode.elを使うの通りに設定を変更しておく。
ちなみにファイルを開くとflymake関連エラーが出るけどそれは直してない。
Sass and Compass in Action