問題
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¥
解答と解説（上下位置を中央から調整できるmixinを作ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
1問目の応用ではあるが
少し考える必要がある。
mixinは複数行にも対応することを覚えておこう。
上下中央寄せはよく使うレイアウトなので
mixinにしておくと便利だ。
