1
변수로 기준 폭 저장
$mobile-breakpoint: 768px;
숫자를 반복하지 않고 한 변수에서 모바일 기준을 관리합니다.
믹스인은 호출 위치의 스타일을 미디어 쿼리 안으로 펼친다
`@content`가 있는 믹스인은 공통 반응형 조건을 한 번 정의하고, 호출 블록의 선언을 컴파일 시 해당 조건 내부로 삽입합니다.
2
조건을 믹스인으로 묶기
@mixin mobile-only { @media screen and (max-width:
#{$mobile-breakpoint - 1}) { @content; } }
인터폴레이션은 변수 계산값을 미디어 쿼리 문자열로 넣어줍니다.
3
호출 지점에 내용 넣기
.main-header { @include mobile-only { flex-direction: column; }
}
헤더 안에서 넣은 선언이 컴파일 결과의 미디어 쿼리 안에 자리합니다.
컴파일된 CSS
@media screen and (max-width: 767px) { .main-header {
flex-direction: column; } }
A
조건식은 `_mixins.scss`의 한 곳에서 관리됩니다.
B
실제 선언은 `_header.scss`처럼 필요한 모듈 파일에 남습니다.
C
브라우저는 Sass 문법이 제거된 표준 CSS만 읽습니다.
반복되는 반응형 조건은 믹스인으로 빼고, 컴포넌트별 실제 변경 사항은 호출 위치에 둡니다. 이렇게 나누면 조건의 출처와 최종 CSS 배치가 각각 어느 파일에서 결정됐는지 추적할 수 있습니다.