Sass 3.3 で変数を使って更に変数展開

本日 Sass 3.3 が正式リリースされた。
http://blog.sass-lang.com/posts/184094-sass-33-is-released

このアップデートで以前からずっとやろうと思ってたことをやってみる。
もしかしたら標準機能として追加されているのかもしれないけど、その辺りは気にしない。

何をやりたかったかと言うと、変数を使って更に変数を展開すること。
StackOverflow にも Double interpolation (variable inside variable) in Sass という質問があるので、こちらの例を参考にしてみる。

$gray = #ccc;
$white = #fff;

@each $color in gray, white {
    div_#{$color} {            // works fine
        color: #{$#{$color}};  // fails
    }
}

もちろん、この例はエラーになる。
じゃあ、どうしたら良いだろうかと調べてみると、sass-utilities の interpolate-variable 関数を使うと出来るらしい。内部処理の問題で Sass 3.3 以降でのみ使える。

gem でのインストールも出来るので、試すのは簡単。
ただし、これ自体は compass 用に作られているので、sass オンリーで試したいなら改変が必要。

必要な部分だけ抜き出したのがこちら。

module Sass::Script::Functions

  # Interpolate
  def interpolate_variable(variable_name)
    environment.var(variable_name.value) || Sass::Script::Bool.new(false)  
  end

end

これを適当に sass-utilities.rb と名前を付けて保存しておく。
次に scss ファイルを作成する。

$gray: #ccc;
$white: #fff;

@each $color in gray, white {
    div_#{$color} {
        color: interpolate-variable(#{$color});
    }
}

これも適当に test.scss とか名前を付けて保存しておく。

▼実行

$ sass -r ./sass-utilities.rb test.scss

▼結果

div_gray {
  color: #cccccc; }

div_white {
  color: white; }

無事展開できた。