問題
2
SASS
上下位置を中央から調整できるmixinを作ろう
SASSの問題に挑戦しよう！
問題
「上下位置を中央から調整できるmixinを作ろう」
myPositionと言う名前のmixinを作り「期待するCSS」を実現しましょう。
あらかじめエディタに書くコード
.parent{
position: relative;
}
.children1{
@include myPosition(-50%);
}
.children2{
@include myPosition(-30%);
}
¥SASS¥
期待する画面
.parent {
position: relative;
}
.children1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.children2 {
position: absolute;
top: 50%;
transform: translateY(-30%);
}
¥CSS¥
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
1問目の応用ではあるが
少し考える必要がある。
mixinは複数行にも対応することを覚えておこう。
上下中央寄せはよく使うレイアウトなので
mixinにしておくと便利だ。
