Main menu

SASS 강좌 | 문법 > 조건문 - @if, @else if, @else

SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다.

문법은 다음과 같습니다.

@if condition {
  ...
} @else if condition {
  ...
} @else {
  ...
​}

condition을 괄호로 둘러싸지 않고, elseif를 띄어쓴다는 점에 주의합니다.

예제

변수 jb-type의 값에 따라 문단의 색을 다르게 만드는 예제입니다.

jb-type의 값이 jb-red이면 빨간색으로, jb-blue이면 파란색으로, jb-redjb-blue가 아니면 검정색으로 만듭니다.

SASS

$jb-type: jb-blue;
p {
  @if $jb-type == jb-red {
    color: red;
  } @else if $jb-type == jb-blue {
    color: blue;
  } @else {
    color: black;
  }
}

CSS

p {
  color: blue; }

SASS 코딩을 다음과 같이 해도 결과는 같습니다.

$jb-type: jb-blue;
@if $jb-type == jb-red {
  p {
    color: red;
  }
} @else if $jb-type == jb-blue {
  p {
    color: blue;
  }
} @else {
  p {
    color: black;
  }
}
Category

Created on 2015-09-18 | Updated on 2017-06-01

이 글을 공유하기

Kakao