** 영상으로 보실 분은 아래 주소를 클릭해주세요.
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는 라이트블루로 처리되는 것을 확인할 수 있습니다.
## 브라우저 결과
'웹언어 > SASS' 카테고리의 다른 글
[SASS강좌] 10강 SASS의 @for - 반복관련 - 오쌤의 니가스터디 (0) | 2021.02.13 |
---|---|
[SASS] 8강 SASS의 @function - OSSAM강좌 (0) | 2020.08.21 |
[SASS] 7강 SASS의 @extend - OSSAM강좌 (0) | 2020.08.20 |
[SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌 (0) | 2020.08.04 |
[SASS] 5강 SASS의 @import - OSSAM강좌 (0) | 2020.04.09 |