SCSS (mixin, if, or, or not ...)

goodlana·2020년 9월 5일
0

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;
}
profile
Let's code like chord !

0개의 댓글