SASS
Googleでログイン問題1：四隅の位置を引数から設定してみよう
myLayoutと言う名前のmixinを作り「期待するCSS」を実現しましょう。
あらかじめエディタに書くコード
.ninja1{
@include myLayout('top', 'left');
}
.ninja2{
@include myLayout('bottom', 'right');
}
¥SASS¥
期待する画面
.ninja1 {
position: absolute;
top: 0;
left: 0;
}
.ninja2 {
position: absolute;
bottom: 0;
right: 0;
}
¥CSS¥
解答ソースコード
@mixin myLayout($pos1, $pos2){
position: absolute;
@if $pos1 == 'top' {
top: 0;
}
@if $pos1 == 'bottom' {
bottom: 0;
}
@if $pos2 == 'left' {
left: 0;
}
@if $pos2 == 'right' {
right: 0;
}
}
¥SASS¥
完了にする！
活動記録をTweetする
1.SASSとは
topとbottomやleftとrightが混在してややこしい時がある。
そんな時にif文で制御できれば良いかもしれない。
ただし分岐しすぎると逆に分かりにくくなるので
使い所は見定めよう。