SCSS_조건문

예시1. true, false로 제어
@mixin btn_radius($h, $radius:true) {height:$h, background:#000;
  @if $radius { >>true
     border-radius: $h / 2;
  }@else{ >>false
       border:1px solid red;
  }
}
.btn { @include btn_radius(30px, false); }


예시2. 조건식으로 제어
중앙정렬
@mixin position($x, $y, $z, $w){ position: absolute; left: $x; top: $y; z-index: $z; width: $w;   @if $x == 50% and $y == 50%{
    transform: translate(-50%, -50%);
  }@else if $x == 50%{
    transform: translateX(-50%);
  }@else if $y == 50%{
    transform: translateY(-50%);
  }
}
div { @include position(50%, null, 2); }
>> div에 변수position을 include하면 조건식에 의하여 x축 50%이동, y축 없음, z-index는 2로 적용됨

 

 

 

 

p.s - 유튜브 리베하얀 영상 참고