변수
색상과 간격을 한 곳에서 관리브랜드 색, spacing, breakpoint처럼 반복되는 값을 이름으로 묶습니다.
중첩
컴포넌트 안의 선택자 관계 표현DOM 구조를 그대로 베끼기보다 2~3단계 안에서 읽히게 유지합니다.
믹스인
반복 규칙을 매개변수로 재사용반응형, flex 정렬, 버튼 변형처럼 패턴이 반복될 때 사용합니다.
Sass 사용 기준
- 변수는 의미 있는 이름으로 두고 색상값 자체를 이름으로 쓰지 않습니다.
- 중첩은 깊어질수록 결과 CSS 선택자가 무거워지는지 확인합니다.
- @extend는 의도치 않은 선택자 결합이 생기지 않는 경우에만 씁니다.
기능 구분
변수값 반복 감소색·간격·크기
부분 파일파일 분리컴포넌트별 SCSS
믹스인패턴 재사용반응형·버튼