SCSS 에서 연산 사용하기
산술 연산자
- SCSS는 기본적인 연산을 제공하므로 레이아웃 설계 및 HTML 요소의 크기를 일정하게 만들 때 등 연산자를 사용해서 다양한 크기 배분을 할 수 있다.
- 연산에서 +, -, * 는 일반적으로 앞의 숫자에서 뒤의 숫자를 더하거나 뺴거나 곱한다.
- 나머지를 연산하는 %는 뒤의 숫자로 앞의 숫자를 나누고 나머지를 출력한다.
- 나머지 연산의 경우 2가지를 주의해야 한다.
- 연산 대상을 괄호로 묶어야 한다.
- 괄호로 묶지 않는 경우 나눠지는 대상이 변수이어야 한다.
- CSS에서 자주 사용되는 calc는 SCSS에서 사용할 수 없다.
$fs: 15px;
$box-margin: 50px;
.frame {
width: 50px + 50px;
height: 100px - 30px;
font-size: $fs * 2;
margin: 50px / 2;
margin: calc(50px / 2);
margin: $box-margin / 2;
margin: (50px / 2);
padding: 100px % 15;
}
비교 연산자, 논리 연산자
- 비교 연산자, 논리 연산자는 조건문, 반복문 등 SCSS 프로그래밍에 주로 사용되는 연산자
비교 연산자
종류 | 기능 |
---|
== | 동등 |
!= | 부등 |
< | 대소 / 보다 작은 |
> | 대소 / 보다 큰 |
<= | 대소 및 동등 / 보다 작거나 같은 |
>= | 대소 및 동등 / 보다 크거나 같은 |
$width: 300px;
.item {
@include item-box;
width: $width;
@if($width >= 300) {
background-color: crimson;
}
@else if($width < 300) {
background-color: royalblue;
}
}
논리 연산자
예제
$size
가 150 픽셀보다 작거나 50픽셀보다 큰 경우를 모두 만족하는 경우, 높이를 200 픽셀로 설정
$size: 100px;
.frame {
@if ($size <= 150px and $size > 50px) {
height: 200px;
}
}
$size
가 150 픽셀보다 크지 않으면 높이를 100 픽셀로 설정
$size: 100px;
.frame {
@if not ($size > 150px) {
height: 100px;
}
}