問題
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の部分が継承したいクラス名だ。
情報が少ない問題なので、
これをクリアできた方は
検索力が高いと言えるでしょう。