2012-03-18

Sassの存在意義

SassはCSSの貧弱さを補うような便利機能について取り上げられることが多い。そのためその機能の奥に隠れているものについて触れられることはあまりない。例えば変数や四則演算、関数によって値に論理的な意味を持たせることができることとか。そういうCSSに足りない概念の導入できることとかももちろん周知させたいけど、それ以上にHTMLとCSSによるWebサイトの作成に新たなアプローチが加わることを周知させられればいいなぁと最近思う。Sassの存在意義というのはその辺りに見いだせるんじゃないかと考えているので。もう「CSSグラデーションのミックスイン！」とかスニペットでやれるようなことを推すのはやめたい(やめてほしい)。

現状ではWebサイトは以下の2つのアプローチでしか作成(更新)できない。

1. HTMLで文書をマークアップして、それに合わせてCSSにセレクターを書く
2. CSSでデザインを定義して、それに合わせてHTMLでクラスを振る(OOCSSやCSSフレームワークが採用する形)

Sassがあるとこれらに加えて、

3. HTMLで文書をマークアップして、CSSでデザインを定義し、Sassで両者を関連付ける

ということが可能になる。

ただ、Sass(y CSS)ではCSSもそのまま書け、デザインの定義と文書への関連付けまでをSassで行えるため、実際にはその2つがぐちゃぐちゃに混ざる形のコードを書いてしまうことが多い(まだ僕もそういう書き方から脱却できていない)。その結果、1とあんまり変わらないんじゃないかみたいなところもあって、Sassの存在意義に疑問を持っちゃう人もいるんじゃないかと思う。3のような形を実現するには@extendや@mediaのネストを駆使してこの2つを切り分ける必要がある……んだけど、そこまで実践できている人は少ない(ほとんど知らない)。

この話をもっとちゃんと書きたいんだけどうまくまとめる自信がない。@extendが引数使えないミックスインみたいにとらえられている現状は是非打開したい。