問題

3
Sass

スタイルを継承して色違いのボタンを作ろう

Sassの問題に挑戦しよう!

問題

スタイルを継承して色違いのボタンを作ろう

期待する画面になるよう穴埋めしよう!

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

                    .btn{
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px 20px;
}
.btn-red{
  //ここに1行足して期待するcssにしよう
  background-color: red;
}
¥SASS¥
                

期待する画面

                                .btn, .btn-red {
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px 20px;
}
.btn-red {
  background-color: red;
}
¥CSS¥
                            

解答と解説(スタイルを継承して色違いのボタンを作ろう)

解説

LINE登録して解答を見る

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

sassのextendを使うと実現が可能だ
@extend .btn; とし
.btnの部分が継承したいクラス名だ。

情報が少ない問題なので、
これをクリアできた方は
検索力が高いと言えるでしょう。

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

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