SCSS
@mixin positionCenter($w, $h, $p: absolute) {
@if(
$p == absolute
or $p == fixed
or not $p==relative) {
width:if(unitless($w), #{$w}px, $w);
height: if(unitless($h), #{$h}px, $h);
position: $p;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
.box1 {
@include positionCenter(10px, 20px);
}
.box2 {
@include positionCenter(50, 50, fixed);
}
.box3 {
@include positionCenter(100, 200, relative);
}
CSS 변환결과
.box1 {
width: 10px;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.box2 {
width: 50px;
height: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}