Sass

Sass 토큰과 빌드 의존성

Sass는 변수와 mixin, nesting을 제공하지만 Next.js 안에서는 CSS Module, 전역 CSS, design token 전략과 함께 정리해야 한다.

01

토큰 종류 분류

빌드 때 고정되는 값은 Sass 변수, 테마처럼 런타임에 바뀌는 값은 CSS variable이 더 자연스럽다.

02

module과 같이 쓴다

Component.module.scss로 지역 scope를 유지하면서 Sass 문법을 사용할 수 있다.

03

중첩 깊이를 제한한다

DOM 구조를 그대로 깊게 중첩하면 작은 마크업 변경에도 스타일이 깨지기 쉽다.

SCSS module
지역 스코프와 Sass CSS Module의 class 격리와 Sass 기능을 함께 쓴다.
컴포넌트 스타일에 적합하다.
Global SCSS
기본 스타일 reset, typography, CSS variable 선언처럼 앱 전체 규칙에 쓴다.
import 위치 제한을 확인한다.
Mixin
반복 코드 media query나 focus ring처럼 반복되는 선언을 묶는다.
과도하면 추적이 어렵다.
Nesting
문맥 표현 관련 selector를 가까이 둘 수 있지만 specificity가 쉽게 커진다.
2-3단계 안으로 제한한다.

테마 · 중첩 · 전역 점검

테마 런타임에 바뀌어야 하는 값을 Sass 변수로 고정하지 않았는가.
중첩 selector가 DOM 구조에 과하게 결합되어 있지 않은가.
전역 전역 SCSS가 컴포넌트별 class를 침범하지 않는가.

module scss

import styles from './Panel.module.scss';

<div className={styles.panel} />