Sass 변수와 CSS 변수는 바뀌는 시점이 다르다

빌드 때 고정할 값과 브라우저에서 바뀔 테마 값을 분리하면 토큰 책임이 선명해진다.

$space

Sass variable

compile-time 계산과 mixin 입력에 사용

--color

CSS custom property

runtime theme와 상속이 필요한 값

@mixin

반복 패턴

focus·breakpoint 선언을 얕게 재사용

module

지역 범위

Component.module.scss로 선택자 충돌 방지

핵심테마처럼 실행 중 바뀌는 값은 CSS 변수, 빌드 계산만 필요한 값은 Sass 변수에 둔다.