Sass Structure

Sass는 반복 값과 컴포넌트 범위를 분리할 때 힘이 납니다

Next.js는 `sass` 패키지만 있으면 `.scss`와 `.module.scss`를 컴파일합니다. 중요한 것은 변수, 믹스인, 전역 스타일, 모듈 스타일의 책임을 섞지 않는 것입니다.

tokens

색상, 간격, 폰트 크기처럼 프로젝트 전반에서 반복되는 값을 모읍니다.

reuse

버튼, 반응형 패턴, flex 정렬처럼 반복되는 선언 묶음을 함수처럼 둡니다.

scope

컴포넌트 클래스는 CSS Modules 해시로 고립되어 충돌을 줄입니다.

global

reset, 기본 타이포그래피, 테마 변수처럼 앱 전체 규칙만 남깁니다.

Next.js 빌드에서 이어지는 순서

변수와 partial이 공통 기준을 제공합니다.

`sass` 컴파일러가 SCSS 문법을 CSS로 변환합니다.

모듈 파일은 고유 클래스, 전역 파일은 앱 규칙으로 남습니다.

컴포넌트는 import한 클래스 이름으로 스타일을 참조합니다.