SCSS
개발자는 .scss 파일에 변수와 중첩 문법을 사용해 작성합니다.
Sass 작성부터 CSS 출력까지
Sass는 변수, 중첩, 믹스인, 부분 파일을 활용해 작성 편의를 높이고 최종적으로 브라우저가 읽는 CSS로 컴파일됩니다.
Partial
색상, 믹스인, 컴포넌트를 부분 파일로 나누어 관리합니다.
Compile
sass 명령이나 빌드 도구가 SCSS를 CSS로 변환합니다.
Link
HTML은 컴파일된 CSS 파일을 link 태그로 불러옵니다.
색상과 간격 값을 한곳에 모아 일관된 스타일 토큰처럼 씁니다.
HTML 구조를 반영하되 너무 깊게 중첩하면 선택자가 과하게 강해집니다.
반복되는 선언 묶음이나 미디어 쿼리를 매개변수와 함께 재사용합니다.
@extend는 편리하지만 선택자 결합 결과가 커질 수 있어 주의합니다.
작업 순서
SCSS 원본과 CSS 출력 파일을 구분하고 HTML에는 출력 파일만 연결합니다.
CSS 실수 방지
부분 파일을 나눌수록 import 순서와 변수 의존성을 명확히 둡니다.
Sass 작성부터 CSS 출력까지
반응형 헤더 스타일을 변수, 믹스인, 부분 파일로 나누어 컴파일합니다.