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; }
無事展開できた。