SASS
LINEでログイン
Googleでログイン
Twitterでログイン問題2：上下位置を中央から調整できる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 myPosition( $pos ) {
position: absolute;
top: 50%;
transform: translateY($pos);
}
¥SASS¥
完了にする！
活動記録をTweetする
1.SASSとは
少し考える必要がある。
mixinは複数行にも対応することを覚えておこう。
上下中央寄せはよく使うレイアウトなので
mixinにしておくと便利だ。