SASS 3.2 の(僕的)目玉機能のPlaceHolderを使ってみた

2012年08月29日

sass

CSSをちょっとプログラムライクに書いてコンパイルするというCSS拡張のSASSを使いだしてから、CSSはどこへ向かっているのか少々不安になりつつも便利なのでもはや手放せない状況のむゆうですが皆様はいかがお過ごしですか?

いつの間にかSASSは3.2になっていたんですね、知りませんでした。3.2でできるようになったことの代表としてはPlaceHolder機能があります。

PlaceHolder?

プレースホルダー(で良いのかな?良いよね?)機能とは、Extendの拡張版なイメージだと思ってもらえると分かりやすいです。もちょっというと「ExtendのMixin版」みたいな?んー、それ違う、却下。

Extendは複数のセレクタで同一のスタイルを使うための機能なんですが、ちょっとこれに関しては問題というか困ったことがありました。

例えば、みんながお世話になっているであろうClearFixのスタイルはExtendで書けばこんな感じなんじゃないかと思います。

これを必要なセレクタで@extendしてあげる感じの運用方法になるわけですね。

Extendは不要なスタイルを記述する可能性がある

ただしこれにはちょっと問題というか困ったことがあって、例えば定義したextendが使われない場合、不要なスタイルがCSSファイルに残ることになってしまいます。だって「もともとあるスタイルを継承するだけ」なんだからしょうがない。

ここがMixinと大きく違うところで、Mixinはファイルをインポートしても @include しない限りはcssに記載されません。

なので、いろんなサイトで使うかもしれない汎用性の高いスタイルを蓄積する場合はmixinになるのかなぁ、な印象です。あとは「css3で作るリッチなボタン」とかは基準の色を指定すればさまざまな個所の色指定を変えるように作る必要があるのでおそらくMixinになるんだろうね。

その問題を解決するのがプレースホルダー機能

プレースホルダーは基本的にはExtendの拡張版的な機能ですが、定義したスタイル自体は記述されなくなります。これ良いね!!

記述方法は、Extendの定義の際に「.」とか「#」とかを使ってたか所を「%」に変更します。そして呼び出す際にも「.」とか「#」とかを「%」にします。それだけ!

その結果、定義したスタイルには人に見られたら恥ずかしい日本語ローマ字クラスとかの分かりやすい名前をつけつつ、しかし所定のセレクタにそのスタイルを当てはめることができます。

それにそもそもCSSって「htmlに対してスタイルを割り当てる」ものであってさ、「スタイルに合わせたクラスをhtmlに振る」てちょっとあんまり正統だとは思ってないのも今まではclassを割り振るやり方を採用していたので、それが解消できそうなのが嬉しいですかね。

これができることで今まで作ったライブラリも変わってきたりするんだろうなぁと思いつつも特にまだ何もできてないもどかしさを持っておりますが、それでも僕は元気に生きています。

SASSに熱烈に希望する機能

そういえば書いてて思い出しただけで、この記事とは直接は関係ない話なんだけど、いやないことはないんだけど、ここら辺でひとつ気がかりなことがあるので何とかならんかなぁと思うことを一つ。

IE9以下ではセレクタ数に限界があるらしいのですが、1つのCSSファイルに対して4095個しか認識しないらしいんです。SASSは性質上、CSSよりも飛躍的にセレクタ数が増えるので、これを超えてしまわないかの心配はつきまとってきます。

なので、コンパイルするファイルを分割するオプションとかあれば良いんじゃないかなぁと思うわけですがいかがでしょ。本当は超えないようになんとかするのが正しいんでしょうが、それどうやればいいのかわからんです。

他にこんな事も書いてます

FBでコメント

2個のコメント

  1. @Webourgeon_com より:

    後で読むー RT @anticyborg: 書いた:SASS 3.2 の(僕的)目玉機能のPlaceHolderを使ってみた – http://t.co/olXXaa9K

  2. @yoshimana より:

    SASS 3.2 の(僕的)目玉機能のPlaceHolderを使ってみた http://t.co/8BiPrIYZ

トラックバック/ピンバックはありません。