Sass変数の(ダメそうな)案

時代はとっくにSass 3.4なのでローカル変数メインにしたいということが前提にある。そうすることで変数名にBEM等のしっかりとした命名規則を使わずに済み、自己言及的な変数名と数文字の変数名でおおむね完結することになる。パーシャル間で共有したい場合はしょうがないので!globalを使ってローカル変数をグローバルへエクスポートするようなあきらめを許容して誤魔化す。

まずある程度はグローバル変数として定義しておく必要がある。それらグローバル変数は自己言及的なもの(それこそ$color-black: #000;といったようなもの)で、実際にウェブサイトで使われる要素やクラスとは無関係に定義していく。

// _variables.scss
$ratio: 1.7;

$ratio-text: 1;
$ratio-text-large: 1.5;

$line-height-default: $ratio;

BEMで言うところのブロックのような意味のある単位で切り分けたパーシャルでは、グローバル変数を使いつつ、繰り返し使うならローカル変数を作る。ローカル変数はちゃんとスコープを抜けたら破棄されるので、短い名前で良い。が、ロゴとサイト・ナビゲーションで高さを揃えたいという要件があった場合、ルールセットの最後(他のスコープが始まる前)で!globalフラグを使ってグローバル変数へとエクスポートする。

// _logo.scss
.logo {
  $fs: ($ratio-text-large * 1rem);
  $lh: $line-height-default;

  font-size: $fs;
  line-height: $lh;

  $height-logo: ($lh * $fs) !global;
}

サイト・ナビゲーションでは定義済みのグローバル変数を参照するだけだ。

// _site-navigation.scss
.site-navigation {
  height: $height-logo;
}

こうすると長い変数名を極力減らすことが可能になる。グローバル変数へとエクスポートする時だけ他との衝突が起こりうるので、その時だけ工夫した長い名前を付ける。

どうやってもきれいに書けない。変数の命名パターンが3つになるのも死の香りが漂っている。変数を一箇所にまとめることのできるグローバル変数のみ使う手法は書きやすさで優る。ただローカル変数メインで書くと、特定のウィジェットを削除する時にそのファイルを削除するだけで終わりになり、一箇所に変数をまとめた場合にグローバルに定義しておくことになるそのウィジェット向けの変数がゴミとして残らないという保守性での見逃せないメリットがある。

まずは自分のウェブサイトでローカル変数メインに書き換えて運用しはじめた。結論はもうちょっと先になりそうだ。