ログイン
問題4

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

アイコン画像

問題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¥
            

コメントのアイコン解説

通常の変数展開であれば、$変数名 とすればokだが
キーワードの中などで参照する場合は #{$変数名} とする必要がある。
これをインターポレーションと呼ぶ。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
1.SASSとは
続きの動画を見たい方は公式LINEから「sass」と送信すると動画が見れます。
SASSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる