[SASS] 9강 SASS의 if와 @if - OSSAM강좌

 

 

 

 

 

 

** 영상으로 보실 분은 아래 주소를 클릭해주세요.

https://youtu.be/ZaAYOmeAFOY

 

 

 

 

 

 

1. if 문법

- 조건에 따른 결과를 true/false로 나눠서 처리하는 삼항연산자와 비슷한 문법입니다.

 

 

 

1) 문법

if(조건식,참표현식,거짓표현식);

- 조건식이 true면 참표현식을 반환, false면 거짓표현식을 반환합니다.

 

 

 

 

 

 

 

 

 

 

 

2) 기본 예제

## HTML코드

<div class="box01"></div>
<div class="box02"></div>

- div 요소가 두개 있다고 가정해보겠습니다.

 

 

 

 

## SCSS코드

div{
    height: 50px;
    border: 3px solid black;
    margin-bottom: 20px;
}

$width1: 600px;
$width2: 300px;

.box01{
    width: $width1;
    background-color: if($width1 > 500,pink,lightblue);
}
.box02{
    width: $width2;
    background-color: if($width2 > 500,pink,lightblue);
}

- box01은 가로사이즈를 600px로 설정하고 배경색을 가로가 500px보다 크면 핑크색, 아니면 라이트블루색상으로 처리합니다.

- box02은 가로사이즈를 300px로 설정하고 배경색을 가로가 500px보다 크면 핑크색, 아니면 라이트블루색상으로 처리합니다.

 

 

 

 

## CSS코드

div {
  height: 50px;
  border: 3px solid black;
  margin-bottom: 20px;
}

.box01 {
  width: 600px;
  background-color: pink;
}

.box02 {
  width: 300px;
  background-color: lightblue;
}

- 결과적으로 box01은 배경색이 핑크색으로 설정되고, box02는 라이트블루색으로 설정됩니다.

 

 

 

 

## 브라우저 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. @if 문법

- 자바스크립트의 if문과 비슷하게 사용됩니다.

- @else를 붙여 false일때도 실행하고, 다중 if문도 실행합니다.

 

 

 

 

1) 문법

 

## 기본 if지시문

@if(조건){
	//참표현식
}

 

 

 

## if else문

@if(조건식){
	//참표현식
}@else{
	//거짓표현식
}

 

 

 

## if else if문 - 다중 if문

@if(조건식1){
	//조건식1이 참일때 표현식
}@else if(조건식2){
	//조건식2가 참일때 표현식
}@else{
	//둘다 거짓일때 표현식
}

 

 

 

 

 

 

 

 

 

 

 

2) 기본예제 - @if @else문으로 처리

## HTML코드

<div class="box01"></div>
<div class="box02"></div>

- 2개의 div박스를 작성해주세요.

 

 

 

## SCSS코드

div{
    height: 50px;
    border: 3px solid black;
    margin-bottom: 20px;
}

$width1: 600px;
$width2: 300px;

.box01{
    width: $width1;
    @if($width1 >= 500){
        background-color: pink;
    }@else{
        background-color: lightblue;
    }
}
.box02{
    width: $width2;
    @if($width2 >= 500){
        background-color: pink;
    }@else{
        background-color: lightblue;
    }
}

- 위의 예제처럼 .box01은 $width1값이 500보다 크거나 같으면 배경색을 핑크색, 아니면 배경색을 라이트블루로 처리합니다. 

-  .box02은 $width2값이 500보다 크거나 같으면 배경색을 핑크색, 아니면 배경색을 라이트블루로 처리합니다. 

 

 

 

# CSS코드 변환

div {
  height: 50px;
  border: 3px solid black;
  margin-bottom: 20px;
}

.box01 {
  width: 600px;
  background-color: pink;
}

.box02 {
  width: 300px;
  background-color: lightblue;
}

- box01은 핑크색으로 처리되고, .box02는 라이트블루로 처리되는 것을 확인할 수 있습니다. 

 

 

 

 

## 브라우저 결과