問題

4
Sass

文字列の変数を展開してクラス名にしよう

Sassの問題に挑戦しよう!

問題

文字列の変数を展開してクラス名にしよう

変数を展開して「期待するCSS」を実現しましょう。

あらかじめエディタに書くコード

                    $prefix: ".ninja";
[ここで変数を展開する]-red {
  color:red;
}
[ここで変数を展開する]-blue {
  color:blue;
}
¥SASS¥
                

期待する画面

                                .ninja-red {
  color: red;
}
.ninja-blue {
  color: blue;
}
¥CSS¥
                            

解答と解説(文字列の変数を展開してクラス名にしよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

通常の変数展開であれば、$変数名 とすればokだが
キーワードの中などで参照する場合は #{$変数名} とする必要がある。
これをインターポレーションと呼ぶ。

さらにスキルアップしたい方は公式LINEから「Sass」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断