if(조건, 참일 때 표현식, 거짓일 때 표현식)
width 크기에 따라 다른 배경색을 나타내도록 디자인을 만들어보자.
index.html
<div class="frame">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
style.scss
.frame div {
height: 100px;
border: 5px solid black;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
$width-case1 : 500px;
$width-case2 : 250px;
.item1 {
width: $width-case1;
background-color: if($width-case1 > 600px, crimson, yellow);
}
.item2 {
width: $width-case2;
background-color: if($width-case2 > 300px, royalblue, tomato);
}
style.css
.frame div {
height: 100px;
border: 5px solid black;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
.item1 {
width: 500px;
background-color: yellow;
}
.item2 {
width: 250px;
background-color: tomato;
}
@if
, @else if
, @else
로 조건별로 값은 참(true), 거짓(false)을 판단해 참일 경우를 표현@else if
를 추가@if(조건 1) {
// 조건 1이 참(true)일 때 표현식
}
@else if(조건 2) {
// 조건 2rk 참(true)일 때 표현식
}
@else {
// 모두 거짓(false)일 때 표현식
}
다중 조건문을 활용하여 박스 width에 따라 다른 배경색을 나타내도록 디자인해보자.
index.html
<div class="frame">
<div class="item">item</div>
</div>
style.scss
@mixin item-box {
border: 5px solid black;
margin: 10px;
padding: 10px;
text-align: center;
box-sizing: border-box;
}
$width: 300px;
.item {
@include item-box;
width: $width;
@if($width >= 300) {
background-color: crimson;
}
@else if($width < 300) {
background-color: royalblue;
}
}
style.css
.item {
border: 5px solid black;
margin: 10px;
padding: 10px;
text-align: center;
box-sizing: border-box;
width: 300px;
background-color: crimson;
}
width: 300px 이상
인 경우width: 300px 미만
인 경우