[SCSS]작성법 4 - 조건문 사용하기 (@if)

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 3 - mixin 이용하기 (@mixin @include)

 

 

@if @else if @else 를 이용해 조건문을 사용합니다.

 

 

아래와 같이 정의합니다. 

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

 

아래와 같이 코드에 적용합니다.

h2 {

  @include text-effect(alert);

}

 

alert 값에 해당하는 조건문이 적용되므로 다음과 같이 적용됩니다.

h2{

  color : yellow; 

}

 

 

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 5 - 반복문 이용하기 (@for)