반응형 블로그 헤더 실습

SCSS 파일을 나누고 하나의 CSS로 컴파일하기

`style.scss`는 변수, 믹스인, 기본 스타일, 레이아웃, 헤더 모듈을 불러오는 메인 파일이고, `sass --watch` 명령은 저장할 때마다 `css/style.css`를 업데이트합니다.

01

부분 파일을 역할별로 분리

  • 값 _variables.scss
  • 패턴 _mixins.scss
  • 모듈 _header.scss
02

메인 SCSS에서 순서대로 가져오기

`style.scss`는 `variables`, `mixins`, `base`, `layout`, `header`를 불러와 헤더 컴포넌트가 필요한 값과 규칙을 한 흐름으로 묶습니다.

style.scss

@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'header';

03

저장할 때마다 CSS 결과 확인

터미널

sass --watch scss/style.scss:css/style.css

결과 확인

  • `css/style.css` 파일이 자동으로 업데이트되는지 확인합니다.
  • 브라우저 너비를 줄여 헤더와 내비게이션 배치 변화를 봅니다.