9. SCSS 조건문 - @if, @else if, @else

sass/scss는 프로그래밍처럼 조건에 따라 생성되는 스타일시트가 다르게 컴파일 되도록 설정할 수 있다.

 

방식 1. 속성의 값에 직접 조건 주기

 

// 변수 지정

$w1: 750px;

$w2: 900px;

 

// 공통

.section1, .section2 {

    height: 50px;

}

.section1 {

    width: $w1;

     background-color: if($w1 > 750, orange, red);

}

.section2 {

    width: $w2;

    background-color:  if($w2 > 750, orange, red);

}

위 조건문의 해석 : if(조건식, 참일떄 실행, 거짓일때 실행)

.section1 의 $w1은 (750 > 750) 이 거짓이므로 background-color: red;가 된다.

.section2 의 $w2은 (900 > 750) 이 참이므로 background-color: orange;가 된다.

여기서 if 앞에 @는 사용되지 않는다.

 

방식 2. 프로그래밍식으로 조건에 따라 다른 속성: 속성값으로 컴파일 하기

 

1) @mixin 사용

@mixin ellipsis($line) {

    overflow: hidden;

    text-overflow: ellipsis;

    @if($line > 1) {

        display: -webkit-box;

        -webkit-line-clamp: $line; // 여러줄 이상 ellipsis

        -webkit-box-orient: vertical;

        white-space: normal;

        vertical-align: baseline;

    } @else if($line == 1) {

        white-space: nowrap;

    }

}

 

2) @include 에  파라미터로 값 변환하기

.ellepse {

    @include ellipsis(1);

}

.ellepse2 {

    @include ellipsis(3);

}

 

결과 ::

.ellepse {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.ellepse2 {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    white-space: normal;

    vertical-align: baseline;

}