#22 - 조건문 - @if / @function / @mixin 활용

함수와 함께 조건문 사용하기

SCSS

@function box-color($size){
    @if ($size>100px and $size<1000px){
        @return orange;
    } @else{
        @return blue;
    }
}

.class{
    background-color : box-color(300px);
}

Compile 된 CSS

.class{
    background-color : orange;
}

 

---

 

Mixin과 함께 조건문 사용하기

SCSS

/* $p가 relative거나 static인 경우에는 실행하지 않는다 */
@mixin pCenter($w, $h, $p: absolute) {
  @if (
    $p == absolute
    or $p == fixed
    or not $p == relative
    or not $p == static
  )
  {
    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 pCenter(10px, 20px);
}
.box2 {
  @include pCenter(50, 50, fixed);
}
.box3 {
  @include pCenter(100, 200, relative);
}

Compile 된 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;
}
/* 조건이 맞지 않아 적용 안됨 */
.box3 {
}