SASS의 연산자

이 글은 SASS의 연산자에 대해 설명합니다.

실제 예제를 통해 SASS의 연산자를 설명하겠습니다.

YouTube Video

SASS의 연산자

SASS 연산자에는 숫자 연산, 비교 연산, 논리 연산, 문자열 조작이 포함됩니다.

산술 연산 (덧셈, 뺄셈, 곱셈, 나눗셈, 나머지)

SASS에서는 표준 산술 연산을 지원하지만, 나눗셈 /은 CSS의 /와 혼동될 수 있으므로 math.div()의 사용이 권장됩니다. 숫자는 단위를 가질 수 있으며, 연산은 호환되는 단위끼리만 가능합니다.

아래는 간단한 산술 연산과 math 모듈 사용 예시입니다.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• 이 코드는 px 단위의 덧셈과 곱셈, 그리고 math.div()를 사용한 나눗셈의 예시입니다.
• 10px + 2em과 같이 호환되지 않는 단위의 연산은 에러가 발생하거나 예기치 않은 결과를 낳을 수 있습니다. 단위를 통일하거나 unit() 및 unitless() 함수를 사용하세요.

단위의 처리 및 자동 변환

SASS는 단위를 가진 숫자를 처리하며, 계산 결과의 단위 규칙은 일반적인 물리 법칙을 따릅니다. 예를 들어 px/px는 단위가 없게(unitless) 됩니다. unit() 함수 사용 시나 math.div() 이후 단위 관리에 주의해야 합니다.

아래는 단위가 있는 값과 없는 값을 혼합하여 처리하는 방법의 예시입니다.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• 단위가 있는 값과 없는 값을 곱하는 것은 예상대로 작동하지만, 나눗셈 시 결과 단위(또는 단위 없음)에 유의해야 합니다.

비교 연산자 (==, !=, <, >, <=, >=)

SASS에는 비교 연산자가 있으며, 조건문(@if)이나 믹스인에서 분기 처리에 사용할 수 있습니다. 색상이나 리스트와 같은 복합 타입의 비교는 각각의 규칙을 따릅니다. 특히 색상 비교는 색상 공간에 따라 다를 수 있음을 주의하세요.

아래는 두 숫자를 비교하여 스타일을 분기하는 예시입니다.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• 비교 연산자는 @if와 결합하여 반응형 및 조건부 스타일 규칙에 사용할 수 있습니다.

논리 연산 (and, or, not)

SASS는 and, or, not을 지원합니다. and/or를 사용해 여러 조건을 결합할 수 있습니다. 괄호를 사용해 우선순위와 평가 순서를 명확히 할 수 있습니다.

아래는 논리 연산자를 사용하여 복잡한 조건을 처리하는 예시입니다.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• and와 or의 우선순위는 괄호로 명확히 할 수 있습니다. 복잡한 조건식에서는 괄호 사용이 가독성과 안전성을 높여줍니다.

문자열 연산 — 문자열 연결 및 보간

SASS에서는 + 연산자나 #{} 보간을 이용하여 문자열을 연결할 수 있습니다. + 연산자는 왼쪽 문자열이 따옴표로 묶여 있는지 여부에 따라 결과가 달라지므로 예측 가능한 #{} 보간을 쓰는 것이 더 안전합니다.

아래는 문자열 연결과 보간의 예시입니다.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• #{} 보간을 사용하면 따옴표나 불필요한 공백 삽입 문제를 피할 수 있습니다.

색상 산술 연산 (더 이상 권장되지 않음)

과거에는 SASS가 '컬러 산술 연산'을 지원하여 색상에 숫자를 더하거나 뺄 수 있었습니다. 하지만 현재 컬러 산술 연산은 폐기되었으며, 색상을 조작하려면 sass:color 모듈의 함수를 사용해야 합니다.

아래는 직접적인 색상 산술 연산은 더 이상 권장하지 않으며 대체 방법을 제안하는 예시입니다.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• 색상을 조작하려면 sass:color 모듈의 함수를 사용하세요.

괄호와 연산자 우선순위

연산의 평가 순서를 제어하려면 괄호를 사용하세요. 괄호 안의 내용은 항상 괄호 밖 연산보다 먼저 평가됩니다. 복잡한 식에서는 괄호를 사용해 가독성을 유지하세요.

아래는 괄호로 계산 순서를 명확히 하는 예시입니다.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• 수학과 마찬가지로 우선순위 규칙이 적용되므로, 원하는 계산 순서를 보장하기 위해 괄호를 사용하세요.

요약

SASS에서 연산자를 사용할 때는 향후 호환성과 가독성을 고려하여 코드를 작성하는 것이 중요합니다. 복잡한 식에서는 괄호로 계산 순서를 명확히 하고, 코드의 가독성을 우선하세요.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video