Sass

Sass 구조화 기능

Next.js에서 Sass를 쓰면 CSS보다 표현력이 넓어지지만, 컴포넌트 책임과 전역 범위를 함께 관리해야 한다.

Sass 사용 기준

style preproc

변수

색, 간격, 크기 같은 반복 값을 한곳에서 관리한다.

중첩

관련 선택자를 구조적으로 묶어 컴포넌트 스타일을 읽기 쉽게 한다.

분할

큰 스타일을 partial로 나눠 유지보수 부담을 줄인다.

모듈 조합

전역 Sass와 CSS Modules를 상황에 맞게 구분해 쓴다.

valuenestsplit범위
Sass 사용 기준

Sass는 CSS를 대체하는 별도 세계가 아니라 반복과 구조화를 돕는 확장이다. 중첩이 깊어지지 않게 범위를 조절해야 한다.