問題4:文字列の変数を展開してクラス名にしよう
変数を展開して「期待するCSS」を実現しましょう。
あらかじめエディタに書くコード
$prefix: ".ninja";
[ここで変数を展開する]-red {
color:red;
}
[ここで変数を展開する]-blue {
color:blue;
}
¥SASS¥
期待する画面
.ninja-red {
color: red;
}
.ninja-blue {
color: blue;
}
¥CSS¥
解答ソースコード
$prefix: ".ninja";
#{$prefix}-red {
color:red;
}
#{$prefix}-blue {
color:blue;
}
¥SASS¥
完了にする!
活動記録をTweetする
1.SASSとは
キーワードの中などで参照する場合は #{$変数名} とする必要がある。
これをインターポレーションと呼ぶ。