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;
    }
}

논리 연산자

종류	기능
and	그리고
or	또는
not	부정

예제

• $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;
    }
}