SCSS에서 가능한 연산 (+, -, , /) - by. UXKM*

Publishing
SCSS
연산과 함수 기초
SCSS에서 가능한 연산 (+, -, *, /)

요약 설명
SCSS는 산술 연산(덧셈, 뺄셈, 곱셈, 나눗셈)을 지원합니다.
변수와 연산을 함께 사용하면 동적으로 값을 계산하여 스타일을 작성할 수 있어, 일관된 디자인 시스템을 구축하는 데 유용합니다.

이 페이지에서는 SCSS의 산술 연산자 사용법, 다양한 단위 연산, 연산 우선순위, 그리고 실제 프로젝트에서 활용하는 예시를 상세히 알아봅니다.

SCSS 연산이란?

SCSS 연산은 컴파일 시점에 수학적 계산을 수행하여 최종 CSS 값으로 변환합니다.
변수와 함께 사용하면 관계 있는 값들을 자동으로 계산할 수 있어 유지보수가 편리합니다.

연산의 기본 개념

SCSS에서는 산술 연산자를 사용하여 값을 계산할 수 있습니다.

								$base-size: 16px;

								.container {
								  width: $base-size * 2;        // 32px (곱하기)
								  height: $base-size + 8px;     // 24px (더하기)
								  padding: $base-size / 2;      // 8px  (나누기)
								  margin: $base-size - 4px;     // 12px (빼기)
								}

								.container {
								  width: 32px;
								  height: 24px;
								  padding: 8px;
								  margin: 12px;
								}

연산은 컴파일 시점에 계산되어 최종 CSS에는 계산된 값만 들어갑니다.

산술 연산자

SCSS에서 사용할 수 있는 네 가지 기본 산술 연산자를 알아봅니다.
여기서 다루는 연산자는 간격, 너비, 폰트 크기 등을 규칙적으로 계산·관리할 때 가장 자주 사용되는 도구입니다.

덧셈 (+)

덧셈 연산자는 두 값을 더합니다.

								$spacing-sm: 8px;
								$spacing-md: 16px;

								.card {
								  padding: $spacing-sm + $spacing-md;  // 24px
								  margin-top: 10px + 5px;              // 15px
								}

덧셈은 같은 단위끼리만 가능합니다. 10px + 5처럼 단위가 다르면 에러가 발생합니다.

뺄셈 (-)

뺄셈 연산자는 두 값의 차이를 계산합니다.

								$container-width: 1200px;
								$sidebar-width: 300px;

								.main-content {
								  width: $container-width - $sidebar-width;  // 900px
								}

뺄셈도 같은 단위끼리만 가능합니다.

곱셈 (*)

곱셈 연산자는 두 값을 곱합니다.

								$base-spacing: 8px;

								.card {
								  padding: $base-spacing * 2;   // 16px
								  margin: $base-spacing * 3;    // 24px
								}

곱셈은 하나의 값만 단위를 가져야 합니다. 10px * 5px처럼 둘 다 단위가 있으면 에러가 발생합니다.

나눗셈 (/)

나눗셈 연산자는 두 값을 나눕니다.
나눗셈은 CSS의 font: 12px/1.5 같은 문법과 충돌할 수 있어 주의가 필요합니다.

								$base-size: 16px;

								.text {
								  font-size: $base-size / 2;    // 8px
								  padding: (20px / 2);          // 10px (괄호 필요)
								  margin: (24px / 2);           // 12px
								}

나눗셈을 사용할 때는 괄호로 감싸거나 변수와 함께 사용해야 SCSS가 연산으로 인식합니다.
그렇지 않으면 CSS의 / 문법으로 해석될 수 있습니다.

								// ❌ 잘못된 예시: CSS 문법으로 해석됨
								.text {
								  font: 12px / 1.5 Arial;        // CSS font shorthand (정상)
								  padding: 20px / 2;             // 에러! CSS 문법으로 해석됨
								  line-height: 16px / 2;         // 에러! CSS 문법으로 해석됨
								}

								// ✅ 올바른 예시: 괄호로 연산임을 명시
								.text {
								  padding: (20px / 2);           // 10px (연산으로 인식)
								  line-height: (16px / 2);       // 8px (연산으로 인식)
								}

								// ✅ 올바른 예시: 변수와 함께 사용하면 괄호 불필요
								$base-size: 16px;
								.text {
								  font-size: $base-size / 2;     // 8px (변수가 있으면 연산으로 인식)
								}

SCSS는 / 기호를 만나면 CSS의 문법인지 연산인지 자동으로 판단합니다.
하지만 숫자만 나열된 경우(예: 20px / 2)는 CSS의 font: 12px/1.5 같은 문법과 혼동될 수 있어 연산으로 인식하지 않습니다.

괄호를 사용하면 SCSS가 명확하게 "이것은 연산이다"라고 인식할 수 있습니다.
또한 변수와 함께 사용하면(예: $base-size / 2) 변수가 포함되어 있어 CSS 문법이 아니라는 것을 자동으로 판단하므로 괄호 없이도 연산으로 인식됩니다.

다양한 단위 연산

SCSS는 다양한 단위 간 연산을 지원합니다.
픽셀, 퍼센트, 단위 없는 숫자를 함께 사용할 때 어떤 제약이 있는지 이해해 두면, 의도치 않은 계산 결과나 에러를 미리 막을 수 있습니다.

같은 단위 연산

가장 안전한 방법은 같은 단위끼리 연산하는 것입니다.

								$spacing-sm: 8px;
								$spacing-md: 16px;

								.container {
								  padding: $spacing-sm + $spacing-md;  // 24px
								  margin: $spacing-md - $spacing-sm;   // 8px
								}

퍼센트 연산

퍼센트와 다른 단위를 연산할 수 있습니다.

								.container {
								  width: 50% + 20px;        // ❌ 에러 발생
								  width: calc(50% + 20px);  // ✅ CSS calc() 사용
								}

퍼센트와 다른 단위를 직접 연산할 수는 없지만, CSS의 calc() 함수를 사용하면 됩니다.

단위 없는 숫자 연산

단위 없는 숫자(예: 1.5, 2)는 다른 단위와 연산할 수 있습니다.

								$base-size: 16px;
								$line-height: 1.5;

								.text {
								  font-size: $base-size;
								  line-height: $line-height;  // 1.5 (단위 없음)
								  padding: $base-size * 1.5;  // 24px
								}

연산 우선순위

여러 연산이 함께 사용될 때 연산 우선순위를 이해하는 것이 중요합니다. SCSS의 연산 우선순위는 일반적인 사칙연산 우선순위와 동일합니다.
우선순위를 잘못 이해하면 숫자는 맞는데 디자인은 어색한 미묘한 버그가 생기기 쉬우므로, 기본 규칙을 한 번 정리해 두는 것이 좋습니다.

SCSS 연산 우선순위

SCSS 연산은 다음과 같은 우선순위를 가집니다.

괄호 ( ) = 가장 높은 우선순위
곱셈 *, 나눗셈 /
덧셈 +, 뺄셈 - = 가장 낮은 우선순위

기본 우선순위 예시

일반적인 수학 규칙과 동일하게 곱셈과 나눗셈이 덧셈과 뺄셈보다 우선합니다.

									$base: 10px;

									.container {
									  padding: $base + 5px * 2;  // 20px (5px * 2가 먼저 계산)
									  margin: ($base + 5px) * 2; // 30px (괄호 안이 먼저 계산)
									}

위 예시에서 $base + 5px * 2는 10px + (5px * 2) = 20px로 계산됩니다.

우선순위별 상세 예시

다양한 연산이 섞여 있을 때의 계산 순서를 확인해봅니다.

									$base: 16px;
									$multiplier: 2;

									.element {
									  // 1. 괄호가 가장 먼저 계산됨
									  padding: ($base + 4px) * $multiplier;
									  // 계산: (16px + 4px) * 2 = 40px

									  // 2. 곱셈/나눗셈이 덧셈/뺄셈보다 먼저 계산됨
									  margin: $base + 4px * $multiplier;
									  // 계산: 16px + (4px * 2) = 24px

									  // 3. 같은 우선순위는 왼쪽에서 오른쪽으로
									  width: $base * 2 / 4 + 8px;
									  // 계산: ((16px * 2) / 4) + 8px = 8px + 8px = 16px

									  // 4. 괄호로 명확하게 표현하는 것이 좋음
									  height: ($base * $multiplier) / 2 - 4px;
									  // 계산: ((16px * 2) / 2) - 4px = 16px - 4px = 12px
									}

복잡한 연산일수록 괄호를 사용하여 우선순위를 명확히 표현하는 것이 좋습니다. 이렇게 하면 코드를 읽는 사람도 의도를 쉽게 이해할 수 있습니다.

실제 활용 예시

연산을 실제 프로젝트에서 활용하는 예시를 살펴봅니다.
여기서는 간격, 레이아웃, 타이포그래피처럼 디자인 시스템에서 자주 쓰이는 값들을 연산으로 관리해 코드를 어떻게 단순화할 수 있는지를 확인합니다.

간격 시스템 구축

기본 간격을 기준으로 배수 관계의 간격을 자동 계산합니다.

								$base-spacing: 8px;

								// 간격 변수 자동 생성
								$spacing-1: $base-spacing;        // 8px
								$spacing-2: $base-spacing * 2;    // 16px
								$spacing-3: $base-spacing * 3;    // 24px
								$spacing-4: $base-spacing * 4;    // 32px

								.card {
								  padding: $spacing-2;           // 16px
								  margin-bottom: $spacing-3;     // 24px
								}

이렇게 하면 기본 간격만 변경하면 모든 간격이 자동으로 조정됩니다.

반응형 컨테이너 너비

기본 너비를 기준으로 여백을 계산하여 컨테이너 너비를 결정합니다.

								$container-max-width: 1200px;
								$container-padding: 16px;

								.container {
								  max-width: $container-max-width;
								  width: $container-max-width - ($container-padding * 2);
								  padding: 0 $container-padding;
								}

폰트 크기 스케일

기본 폰트 크기를 기준으로 비율에 맞춰 폰트 크기를 계산합니다.

								$font-size-base: 16px;
								$scale-factor: 1.25;

								.text-sm {
								  font-size: $font-size-base / $scale-factor;  // 12.8px
								}

								.text-base {
								  font-size: $font-size-base;  // 16px
								}

								.text-lg {
								  font-size: $font-size-base * $scale-factor;  // 20px
								}

정리

SCSS에서 가능한 연산에 대해 알아본 내용을 정리합니다.

산술 연산자: 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 네 가지 기본 연산 지원
단위 연산: 같은 단위끼리 연산 가능, 단위 없는 숫자는 다른 단위와 연산 가능
연산 우선순위: 곱셈/나눗셈이 덧셈/뺄셈보다 우선, 괄호로 명확히 지정 가능
활용 예시: 간격 시스템, 컨테이너 너비, 폰트 크기 스케일 등에서 유용

다음 페이지에서는 단위 연산 시 주의사항을 자세히 알아봅니다.