조건문 - IF, IF예제

1. @if (지시어)

@if 지시어는 조건에 따른 분기 처리가 가능하며, if 문(if statements)과 유사하다.
같이 사용할 수 있는 지시어는 @else, if가 있다.
추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있다.

// @if
@if (조건) {
  /* 조건이 참일 때 구문 */
}

// @if @else
@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

 

조건에 ( )는 생략이 가능하기 때문에, ( ) 없이 작성하는 방법이 좀 더 편리할 수 있다.

$bg: true;
div {
  @if $bg {
    background: url("/images/a.jpg");
  }
}

$color: orange;
div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else if $color == banana {
    color: #FFFF00;
  } @else {
    color: #2A1B0A;
  }
}

div {
  color: #FE9A2E;
}

다음과 같이 분기처리를 여러번 할 수 있다.

 

 

 

2. IF 예제

1. 조건문을 이용해서 값을 출력하기

@function limitSize($size) {
    @if ($size >= 0 and $size <= 200px){
        @return 200px;
    } @else{
        @return 800px;
    }
}

div{
    width: limitSize(180px);
    height: limitSize(340px);
}

div {
  width: 200px;
  height: 800px;
}

조건에 따라서 출력이 다르게 나온걸 볼 수 있다.

 

 

2. 내장함수를 이용해서 값을 출력하기

@mixin positionCenter($w, $h, $p: absolute){
    width: if(unitless($w), #{$w}px, $w);
    height: $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();
}

.box1 {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.box2 {
  width: 50px;
  height: 50;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

box2의 두번째 50인자를 보면 px단위가 들어가지 않은걸 볼 수 있다. 이것을 해결하기 위해서는 SASS에 내장함수를 이용하는 방법이 있다. 

"if(unitless($w), #{$w}px, $w)"는 만약에 $w가 단위가 없다면 px을 넣어주고 단위가 있다면 그냥 $w값을 넣어주어라" 라는 뜻이다.

 

 

3. if 지시어 사용하기

만약에, position: absolute나 position: fixed는 top, bottom, left, right, margin이 필요하지만, 다 필요 없을 때가 있다. position: relative 같은 경우는 그러하다. 이럴땐 어떻게 해결할까?

@mixin positionCenter($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($w), #{$w}px, $w);
        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);
}

.box1 {
  width: 10px;
  height: 10px;
  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;
}

or not의 조건문으로 relative를 제외시키면 된다. 그러면 position: relative값은 조건문에서 제외 되기때문에 css컴파일할때 아무것도 나오지 않은걸 알 수 있다.