단위 연산 시 주의사항

단위 호환성

SCSS에서 연산을 할 때는 단위 호환성을 고려해야 합니다.
모든 단위가 서로 연산 가능한 것은 아닙니다. 단위 규칙을 잘 이해해 두면 연산 오류를 줄이고, 반응형 레이아웃에서 예기치 않은 결과가 나오는 상황을 예방할 수 있습니다.

같은 단위끼리만 연산 가능

일반적으로 같은 단위끼리만 연산할 수 있습니다.

								$size-1: 10px;
								$size-2: 20px;

								.container {
								  width: $size-1 + $size-2;  // 30px (가능)
								}

								$size-px: 10px;
								$size-em: 2em;

								.container {
								  width: $size-px + $size-em;  // 에러 발생
								}

px와 em처럼 다른 단위는 직접 연산할 수 없습니다.
이런 경우 CSS의 calc() 함수를 사용해야 합니다.

호환 가능한 단위

일부 단위는 호환되어 연산이 가능합니다.

단위 그룹
호환 단위
설명

절대 길이

px, cm, mm, in, pt, pc

절대 길이 단위끼리는 연산 가능
상대 길이

em, rem, %

상대 길이 단위끼리는 연산 가능
혼합

절대 길이와 상대 길이는 연산 불가

px + em 같은 연산은 불가능

나눗셈 연산의 특수성

나눗셈 연산은 특별한 주의가 필요합니다.
CSS의 font: 12px/1.5 같은 문법과 충돌할 수 있기 때문입니다.

나눗셈이 연산으로 인식되지 않는 경우

나눗셈은 특정 조건에서만 연산으로 인식됩니다.

								$base-size: 16px;

								// 연산으로 인식됨
								.text {
								  font-size: $base-size / 2;        // ✅ 변수와 함께 사용
								  padding: (20px / 2);              // ✅ 괄호 사용
								  margin: 24px / 2;                 // ✅ 단위가 있는 값
								}

								// 연산으로 인식 안 됨 (CSS 문법으로 해석)
								.text {
								  font: 12px/1.5;                   // ❌ CSS의 font 문법 (font-size, line-height의 shorthand 선언)
								  border-radius: 10px / 5px;        // ❌ CSS의 border-radius 문법 (가로 / 세로 반지름)
								}

나눗셈을 연산으로 사용하려면 변수와 함께 사용하거나 괄호로 감싸야 합니다.

안전한 나눗셈 사용법

나눗셈을 안전하게 사용하는 방법을 알아봅니다.

								$base-size: 16px;
								$half-size: $base-size / 2;  // 변수에 저장

								.text {
								  // 방법 1: 변수 사용
								  font-size: $half-size;

								  // 방법 2: 괄호 사용
								  padding: (20px / 2);

								  // 방법 3: 변수와 직접 연산
								  margin: $base-size / 2;
								}

가장 안전한 방법은 나눗셈 결과를 변수에 저장하거나 괄호로 명확히 표시하는 것입니다.

calc() 함수와의 차이

SCSS 연산과 CSS의 calc() 함수는 다른 방식으로 동작합니다.
두 방식을 언제 선택해야 하는지 알면, 브라우저에서만 가능한 계산과 빌드 타임에 미리 처리해 둘 계산을 깔끔하게 나눌 수 있습니다.

SCSS 연산 vs calc()

두 방식의 차이를 비교해봅니다.

구분
SCSS 연산
calc()

처리 시점

컴파일 시점 (빌드 타임)

런타임 (브라우저에서 실행)
단위 제한

같은 단위끼리만 연산 가능

다른 단위도 연산 가능 (px + %, em + rem 등)
결과

계산된 값이 CSS에 포함

calc() 표현식이 CSS에 그대로 유지

calc() 사용 예시

다른 단위를 연산해야 할 때는 calc()를 사용합니다.

								$sidebar-width: 300px;

								.main-content {
								  // SCSS 연산 불가능 (px와 %는 다른 단위)
								  // width: 100% - $sidebar-width;  // 에러

								  // calc() 사용
								  width: calc(100% - #{$sidebar-width});
								}

SCSS 변수를 calc() 안에서 사용할 때는 인터폴레이션(#{})을 사용해야 합니다.

인터폴레이션을 사용해야 하는 이유에 대해서는 아래 [인터폴레이션 사용] 섹션에서 자세히 설명합니다.

일반적인 실수와 해결 방법

단위 연산 시 자주 발생하는 실수와 그 해결 방법을 정리합니다.
실제 프로젝트에서 자주 마주치는 에러 패턴을 미리 알아두면, 나중에 같은 문제가 생겼을 때 어디부터 의심해야 하는지를 빠르게 떠올릴 수 있습니다.

곱셈에서 두 값 모두 단위를 가진 경우

곱셈은 하나의 값만 단위를 가져야 합니다.

								// 에러 발생
								width: 10px * 5px;  // ❌ 둘 다 단위가 있음

								// 올바른 방법
								width: 10px * 5;    // ✅ 하나만 단위
								width: 10 * 5px;    // ✅ 하나만 단위

나눗셈에서 CSS 문법과 충돌

나눗셈이 CSS 문법으로 해석되는 경우입니다.

								// CSS 문법으로 해석됨 (연산 아님)
								.text {
								  font: 12px/1.5;  // CSS의 font 문법  (font-size, line-height의 shorthand 선언)
								}

								// 연산으로 인식하려면
								.text {
								  font-size: (12px / 1.5);  // 괄호 사용 (12px ÷ 1.5) = 8px
								}

퍼센트와 다른 단위 연산

퍼센트는 다른 단위와 직접 연산할 수 없습니다.

								// 에러 발생
								width: 50% + 20px;  // X: 퍼센트와 px는 연산 불가

								$padding: 20px;

								.container {
								  // calc() 사용
								  width: calc(50% + #{$padding});
								}

0 값의 단위 처리

0 값은 단위가 없어도 됩니다.

								// 둘 다 동일하게 동작
								.container {
								  margin: 0;
								  margin: 0px;
								}

								// 연산에서도 0은 단위 없이 사용 가능
								$base: 16px;
								.container {
								  padding: $base - 0;  // 16px
								}

인터폴레이션 사용

인터폴레이션(#{})은 SCSS 변수를 문자열이나 특정 문맥에서 사용할 때 필요한 문법입니다.
일반적인 CSS 속성 값에서는 변수를 그대로 사용할 수 있지만, calc() 함수나 문자열, 선택자, 속성명 등에서는 인터폴레이션을 사용해야 변수가 올바르게 해석됩니다.

인터폴레이션이란?

인터폴레이션은 변수 값을 문자열로 변환하여 삽입하는 기능입니다.
#{$variable} 형태로 사용하며, 변수의 값을 그대로 텍스트로 치환합니다.

								$size: 16px;

								// 일반적인 사용 (인터폴레이션 불필요)
								.text {
								  font-size: $size;  // 16px (정상 작동)
								}

								// calc() 안에서 사용 (인터폴레이션 필요)
								.container {
								  width: calc(100% - #{$size});  // calc(100% - 16px)
								}

일반 CSS 속성에서는 변수를 그대로 사용해도 되지만, calc() 같은 함수 안에서는 인터폴레이션이 필요합니다.

인터폴레이션이 필요한 이유

인터폴레이션을 사용하지 않으면 SCSS가 변수를 연산으로 해석하려고 시도하거나, 문법 오류가 발생할 수 있습니다.

								$size: 16px;

								.container {
								  // ❌ 에러: SCSS가 연산으로 해석하려고 시도
								  width: calc(100% - $size);
								}

								$size: 16px;

								.container {
								  // ✅ 정상: 변수 값이 문자열로 삽입됨
								  width: calc(100% - #{$size});
								}

								.container {
								  width: calc(100% - 16px);
								}

인터폴레이션을 사용하면 변수 값이 그대로 문자열로 치환되어 calc() 함수에 올바르게 전달됩니다.

인터폴레이션이 필요한 경우

다음과 같은 경우에는 반드시 인터폴레이션을 사용해야 합니다.

calc() 함수 안에서 사용

calc() 함수 안에서는 변수를 직접 사용할 수 없고, 인터폴레이션으로 변수 값을 문자열로 변환해야 합니다.

									$size: 16px;
									$padding: 20px;

									.container {
									  width: calc(100% - #{$size} - #{$padding});
									}

문자열 안에서 사용

문자열 안에서 변수를 사용할 때는 인터폴레이션으로 변수 값을 텍스트로 삽입할 수 있습니다.

									$size: 16px;
									$color: #0a58ca;

									.element::before {
									  content: "#{$size} 크기의 텍스트";
									  background-image: url("image-#{$color}.png");
									}

									.element::before {
									  content: "16px 크기의 텍스트";
									  background-image: url("image-#0a58ca.png");
									}

선택자 안에서 사용

선택자 이름이나 미디어 쿼리 조건에서 변수를 사용할 때도 인터폴레이션이 필요합니다.

									$size: 16px;
									$breakpoint: md;

									.element-#{$size} {
									  padding: $size;
									}

									@media (min-width: #{$breakpoint}) {
									  .container { width: 100%; }
									}

									.element-16px {
									  padding: 16px;
									}

									@media (min-width: md) {
									  .container { width: 100%; }
									}

속성명에서 사용

속성명을 변수로 만들 때도 인터폴레이션을 사용해야 합니다.

									$property: margin;

									.container {
									  #{$property}: 16px;
									}

									.container {
									  margin: 16px;
									}

인터폴레이션 사용 시 주의사항

인터폴레이션을 사용할 때 주의해야 할 점들을 알아봅니다.

								$size: 16px;

								// ✅ 올바른 사용
								.container {
								  width: calc(100% - #{$size});
								}

								// ❌ 잘못된 사용: 인터폴레이션 안에서 연산 불가
								.container {
								  width: calc(100% - #{$size * 2});  // 에러
								}

								// ✅ 해결 방법: 연산을 먼저 수행
								$double-size: $size * 2;
								.container {
								  width: calc(100% - #{$double-size});
								}

인터폴레이션 안에서는 연산을 직접 수행할 수 없습니다.
연산이 필요한 경우 변수에 먼저 계산한 값을 저장한 후 인터폴레이션으로 사용해야 합니다.

인터폴레이션 vs 일반 변수 사용

언제 인터폴레이션을 사용하고, 언제 일반 변수를 사용하는지 비교해봅니다.

사용 위치
일반 변수
인터폴레이션

일반 CSS 속성 값

$size ✅

#{$size} (불필요하지만 가능)
calc() 함수

$size ❌ 에러

#{$size} ✅ 필수
문자열 안

$size ❌ 에러

#{$size} ✅ 필수
선택자

$size ❌ 에러

#{$size} ✅ 필수
속성명

$property ❌ 에러

#{$property} ✅ 필수

일반 CSS 속성 값에서는 변수를 그대로 사용하는 것이 일반적이지만, 특수한 문맥에서는 인터폴레이션이 필수입니다.

모범 사례

단위 연산을 안전하고 효율적으로 사용하기 위한 모범 사례를 정리합니다.

같은 단위 사용하기

가능하면 같은 단위를 사용하여 연산하는 것이 가장 안전합니다.

								// 좋은 예시: 모두 px 사용
								$base: 16px;
								$padding: 8px;
								$margin: 24px;

								.container {
								  padding: $base + $padding;  // 24px
								  margin: $margin;
								}

괄호로 명확히 표시

복잡한 연산은 괄호로 우선순위를 명확히 표시합니다.

								$base: 16px;

								.container {
								  padding: ($base + 8px) * 2;  // 명확한 우선순위
								}

calc()와 SCSS 연산 조합

필요한 경우 SCSS 연산과 calc()를 함께 사용할 수 있습니다.

								$base: 16px;
								$padding: $base * 2;  // SCSS 연산

								.container {
								  width: calc(100% - #{$padding});  // calc() 사용
								}

정리

단위 연산 시 주의사항에 대해 알아본 내용을 정리합니다.

단위 호환성: 같은 단위끼리만 연산 가능, 다른 단위는 calc() 사용
나눗셈 특수성: 변수와 함께 사용하거나 괄호로 감싸야 연산으로 인식
calc()와의 차이: SCSS 연산은 컴파일 시점, calc()는 런타임
일반적인 실수: 곱셈에서 두 값 모두 단위, 나눗셈 충돌, 퍼센트 연산 등
인터폴레이션: calc()나 문자열에서 변수 사용 시 #{} 필요
모범 사례: 같은 단위 사용, 괄호로 명확히 표시, calc()와 조합

다음 페이지에서는 SCSS의 기본 내장 함수에 대해 자세히 알아봅니다.