CSS 변수와 SCSS 변수의 차이 - by. UXKM

Publishing
SCSS
변수(Variables)로 스타일 관리하기
CSS 변수와 SCSS 변수의 차이

요약 설명
CSS와 SCSS 모두 변수 기능을 제공하지만, 각각의 특징과 사용 방법이 다릅니다.
CSS Custom Properties(--variable)는 브라우저에서 직접 실행되는 변수이고, SCSS 변수($variable)는 컴파일 시점에 값으로 치환됩니다.

이 페이지에서는 CSS 변수와 SCSS 변수의 차이를 상세히 비교하고, 각각의 장단점, 사용 시기, 그리고 함께 사용하는 방법을 알아봅니다.

SCSS 변수와 CSS 변수의 기본 차이

CSS 변수와 SCSS 변수는 근본적으로 다른 방식으로 동작합니다.
어떤 상황에서 어떤 변수를 써야 할지 판단하려면, 두 변수가 어느 시점에, 어떤 규칙으로 값이 결정되는지를 먼저 이해하는 것이 중요합니다.

SCSS 변수 ($variable)

SCSS 변수는 컴파일 시점에 값으로 치환됩니다.
최종 CSS 파일에는 변수명이 아닌 실제 값이 들어갑니다.

								// SCSS
								$primary-color: #0a58ca;

								.button {
								  background: $primary-color;
								}

								/* CSS */
								.button {
								  background: #0a58ca;
								}

SCSS 변수는 컴파일 전에만 존재하며, 브라우저는 변수 자체를 볼 수 없습니다.

CSS 변수 (--variable)

CSS Custom Properties는 브라우저에서 실행되는 변수입니다.
최종 CSS 파일에도 변수명이 그대로 남아있고, 브라우저가 런타임에 값을 해석합니다.

								/* CSS */
								:root {
								  --primary-color: #0a58ca;
								}

								.button {
								  background: var(--primary-color);
								}

CSS 변수는 브라우저에서 직접 읽고 사용할 수 있으며, JavaScript로도 동적으로 변경할 수 있습니다.

주요 차이점 비교

CSS 변수와 SCSS 변수의 주요 차이점을 체계적으로 비교해봅니다.
처리 시점, 동적 변경, 스코프, 호환성처럼 자주 헷갈리는 항목들을 표로 정리해 두면, 실무에서 변수 전략을 세울 때 빠르게 참고할 수 있습니다.

처리 시점

가장 큰 차이는 변수가 처리되는 시점입니다.

변수 타입
처리 시점
최종 CSS

SCSS 변수

컴파일 시점 (빌드 타임)

실제 값으로 치환됨
CSS 변수

런타임 (브라우저에서 실행)

변수명이 그대로 유지됨

동적 변경 가능 여부

CSS 변수는 JavaScript로 동적으로 변경할 수 있지만, SCSS 변수는 컴파일 후에는 변경할 수 없습니다.

								/* CSS */
								:root {
								  --primary-color: #0a58ca;
								}

								.button {
								  background: var(--primary-color);
								}

								// JavaScript
								document.documentElement.style.setProperty('--primary-color', '#0066cc');
								// 버튼 색상이 즉시 변경됨

CSS 변수는 테마 전환, 다크 모드, 사용자 설정 등 런타임에 값을 변경해야 할 때 유용합니다.

스코프(Scope)

두 변수 모두 스코프를 가지지만, 동작 방식이 다릅니다.

								// 전역 변수
								$primary-color: #0a58ca;

								.button {
								  // 지역 변수 (이 블록 안에서만 사용 가능)
								  $local-color: #084298;
								  background: $local-color;
								}

								// $local-color는 여기서 사용 불가

								/* 전역 변수 */
								:root {
								  --primary-color: #0a58ca;
								}

								.button {
								  /* 지역 변수 (이 요소와 자식 요소에서 사용 가능) */
								  --local-color: #084298;
								  background: var(--local-color);
								}

								/* 자식 요소에서도 --local-color 사용 가능 */

CSS 변수는 상속되므로 자식 요소에서도 사용할 수 있지만, SCSS 변수는 선언된 범위에서만 사용 가능합니다.

브라우저 호환성

브라우저 호환성도 중요한 차이점입니다.

변수 타입
호환성
설명

SCSS 변수

모든 브라우저

컴파일되어 일반 CSS가 되므로 모든 브라우저에서 동작
CSS 변수

IE11 미지원

모던 브라우저에서만 지원 (Chrome 49+, Firefox 31+, Safari 9.1+)

IE11을 지원해야 하는 프로젝트에서는 SCSS 변수를 사용하거나, CSS 변수와 함께 폴백 값을 제공해야 합니다.

각 변수의 장단점

CSS 변수와 SCSS 변수 각각의 장점과 단점을 정리합니다.
두 변수 중 하나만 고집하기보다는, 어떤 역할은 SCSS 변수로, 어떤 역할은 CSS 변수로 맡길지를 결정할 때 기준점으로 삼을 수 있습니다.

SCSS 변수의 장단점

SCSS 변수를 사용할 때의 장점과 단점입니다.

구분
내용

장점

• 모든 브라우저 호환
• 컴파일 시점에 최적화 가능
• SCSS 문법과 자연스럽게 통합 (연산, 함수 등)
• 미사용 변수 자동 제거 가능
단점

• 런타임에 변경 불가
• JavaScript로 접근 불가
• 컴파일 과정 필요

CSS 변수의 장단점

CSS 변수를 사용할 때의 장점과 단점입니다.

구분
내용

장점

• 런타임에 동적 변경 가능
• JavaScript로 접근 및 수정 가능
• 상속을 통한 스코프 관리
• 컴파일 불필요 (순수 CSS)
단점

• IE11 미지원
• SCSS 연산/함수와 직접 사용 불가
• 성능 오버헤드 (약간)

언제 어떤 변수를 사용할까?

상황에 따라 어떤 변수를 사용하는 것이 적합한지 가이드라인을 제시합니다.

SCSS 변수를 사용하는 경우: IE11 지원이 필요한 경우: CSS 변수는 IE11에서 동작하지 않으므로 SCSS 변수 사용; 컴파일 시점에 최적화가 필요한 경우: SCSS 연산이나 함수를 사용해야 할 때; 런타임 변경이 불필요한 경우: 정적인 값만 필요한 경우; 기존 SCSS 프로젝트: 이미 SCSS 변수를 사용 중인 프로젝트

CSS 변수를 사용하는 경우: 다크 모드나 테마 전환이 필요한 경우: 런타임에 값을 변경해야 할 때; JavaScript로 동적 제어가 필요한 경우: 사용자 설정이나 실시간 변경이 필요할 때; 모던 브라우저만 지원하는 경우: IE11 지원이 필요 없을 때; 순수 CSS 프로젝트: SCSS를 사용하지 않는 프로젝트

함께 사용하는 방법

SCSS 변수와 CSS 변수를 함께 사용할 수도 있습니다.
각각의 장점을 활용하는 방법을 알아봅니다.

SCSS 변수로 CSS 변수 생성

SCSS 변수를 사용하여 CSS 변수를 동적으로 생성할 수 있습니다.

								// SCSS 변수
								$primary-color: #0a58ca;
								$spacing-md: 16px;

								:root {
								  // SCSS 변수를 CSS 변수로 변환
								  --primary-color: #{$primary-color};
								  --spacing-md: #{$spacing-md};
								}

								.button {
								  // CSS 변수 사용
								  background: var(--primary-color);
								  padding: var(--spacing-md);
								}

이렇게 하면 SCSS의 컴파일 시점 최적화와 CSS 변수의 런타임 유연성을 모두 활용할 수 있습니다.

다크 모드 예시

SCSS 변수와 CSS 변수를 함께 사용하여 다크 모드를 구현하는 예시입니다.

								// SCSS 변수로 기본 색상 정의
								$color-primary: #0a58ca;
								$color-bg-light: #ffffff;
								$color-bg-dark: #212529;
								$color-text-light: #212529;
								$color-text-dark: #ffffff;

								:root {
								  // 라이트 모드 CSS 변수
								  --primary-color: #{$color-primary};
								  --bg-color: #{$color-bg-light};
								  --text-color: #{$color-text-light};
								}

								[data-theme="dark"] {
								  // 다크 모드 CSS 변수
								  --primary-color: #{$color-primary};
								  --bg-color: #{$color-bg-dark};
								  --text-color: #{$color-text-dark};
								}

								.body {
								  background: var(--bg-color);
								  color: var(--text-color);
								}

이렇게 구성하면 JavaScript로 data-theme 속성만 변경해도 전체 테마가 즉시 전환됩니다.

실무 사용 가이드

실무에서 어떻게 변수를 선택하고 사용할지 가이드라인을 제시합니다.

하이브리드 접근법

실무에서는 두 변수를 함께 사용하는 하이브리드 접근법이 효과적입니다.

SCSS 변수: 컴파일 시점에 결정되는 값 (색상 팔레트, 간격 시스템, 폰트 크기 등)
CSS 변수: 런타임에 변경될 수 있는 값 (테마 색상, 사용자 설정 등)

								// SCSS 변수: 정적인 디자인 토큰
								$spacing-sm: 8px;
								$spacing-md: 16px;
								$font-size-base: 16px;

								:root {
								  // CSS 변수: 동적으로 변경 가능한 값
								  --theme-primary: #{$color-primary};
								  --theme-bg: #{$color-bg-light};
								}

								.button {
								  // SCSS 변수 사용 (정적 값)
								  padding: $spacing-sm $spacing-md;
								  font-size: $font-size-base;

								  // CSS 변수 사용 (동적 값)
								  background: var(--theme-primary);
								}

마이그레이션 전략

기존 SCSS 변수 프로젝트에서 CSS 변수로 전환하는 전략입니다.

점진적 전환: 새로운 기능부터 CSS 변수 사용, 기존 코드는 유지
하이브리드 유지: 두 변수를 함께 사용하여 각각의 장점 활용
폴백 제공: IE11 지원이 필요한 경우 CSS 변수와 함께 기본값 제공

정리

CSS 변수와 SCSS 변수의 차이에 대해 알아본 내용을 정리합니다.

처리 시점: SCSS 변수는 컴파일 시점, CSS 변수는 런타임
동적 변경: CSS 변수는 JavaScript로 런타임 변경 가능, SCSS 변수는 불가
브라우저 호환: SCSS 변수는 모든 브라우저, CSS 변수는 IE11 미지원
사용 시기: SCSS 변수는 정적 값, CSS 변수는 동적 변경이 필요한 경우
함께 사용: 하이브리드 접근법으로 각각의 장점 활용 가능

다음 섹션에서는 SCSS의 연산과 함수에 대해 자세히 알아봅니다.