Sass

Sass 구조 규칙

Next.js에서 Sass를 통합하는 방법과 스타일 관리 팁을 변수, nesting, partial 기준으로 정리합니다.

SCSS

확장된 CSS 문법

변수, mixin, 중첩을 사용해 반복 스타일을 줄일 수 있습니다.

Module

지역 스코프 결합

Component.module.scss처럼 파일 단위 스타일 범위를 CSS Modules와 결합합니다.

Structure

파일 분할

토큰, mixin, 컴포넌트 스타일을 역할별로 나누어 둡니다.

Sass 통합 한계

Sass 기능이 많아질수록 팀 규칙이 중요하다

중첩과 mixin을 과하게 쓰면 CSS 결과를 추적하기 어려우므로 깊이와 파일 역할을 정해 두는 편이 안전합니다.

관리 기준

토큰색상과 spacing 변수는 공통 파일에 둡니다.
컴포넌트화면별 스타일은 module.scss로 가까이 둡니다.
전역reset과 base 스타일은 제한적으로 관리합니다.