2015-01-22

Sassの変数の仕組みとOOCSS

A List Apartに掲載されたA Vision for Our Sassという記事を読んでいた。ここに書かれていることが正しいとすると、やはりOOCSSあってのSassなのかなという思いを強くした。でも、今のSassの変数の仕組みとCSSのフラットな構造を考えると、Sassを使ったOOCSSの実現は既に詰みかけている局面だと考えることが多い。

例えばFunction over Presentationの例を見てみよう。

$primary-color: #b32293; //magenta
$secondary-color: #2f6b49; //green

これは確かに機能すると思う。しかし大体においてカラーパレットは最低でもあと5色くらいは必要になることが多いだろう。もちろん$primary-colorのバリエーションであったりするわけだが、それらの名前付けはどうするのだろうか。例えば名前付けをせずに実際に使われる場所でSassの様々な色関数を利用するという手段がある。

a {
  color: $primary-color;

  &:hover {
    color: darken($primary-color, 20%);
  }
}

これもうまく機能することだろう。だが今度はこの微調整した色の再利用性は失われる。とするとやはり名前付けを行う必要があるということになるだろう。

$primary-color-dark: darken($primary-color, 20%);

こうして変数を定義していくとどんどん変数の名前付けが苦しくなっていく。BEMを利用して変数でも頑張って命名規則を細かく規定しても良いだろうが、今度は複数のBEMを取り扱う必要が出てくるかもしれない。カラーパレット用のBEM、ウェブサイト用のBEM、下手をするとプレースホルダー・セレクター用のBEMなどだ。

別のアプローチとしては変数をさらに挟むという手法もある。

$primary-color: #b32293;

$color-a: $primary-color;
$color-a-hover: darken($primary-color, 20%);

a {
  color: $color-a;

  &:hover {
    color: $color-a-hover;
  }
}

カラーパレットの定義をまず行い、それを参照する形で要素やコンポーネントに応じた変数を作成していく。変数名は元々存在する要素名やクラス名にプリフィックスを加えたものなので、HTML側でクラス名さえちゃんと付ければあんまり困らない。実際にスタイルを当てるパーシャルでもどのような変数を参照するかまったく迷う必要がなくなる。グローバル変数が前提な今のSassだとこのようにして変数を挟むか、再利用性を一部で捨てるかのどちらかに決断しないとならない印象だ。

つまりOOCSSのキモとも言える小さい単位でのスタイルの管理が、今のSassのグローバル変数を強いる仕組みと極端に食い合せが悪いということだ。もう少しするとこの辺りは変化していくわけだが、大幅な概念の変化をもたらす変数の局所化へとスムーズに移行ができるわけもなく、破綻して一から作りなおされるという未来はかなり現実味がある。

ではその時にSassを選択する意味・価値はあるのか、というのが今の僕が最も興味を持っている部分だ。結局は厳しい命名規則に縛られた管理を行わざるをえないSassを使ったOOCSSの実現の代わりに、ウェブ標準に寄せたHTML/CSSの書き方で対抗できる可能性があったら面白いなというわけだ。そのためにはHTMLに完全に従属する形でCSSを取り扱う必要があると思うので、構造化されたHTMLを設計するところをスタート地点として、Every Declaration Just OnceのようなCSSでは何も抽象化したりする必要のない書き方を採用すると実現しやすそうかなと考え、色々試し始めたということになる。