반응형 웹을 만들 때마다 모바일, 태블릿, 데스크탑의 픽셀(px) 중단점(Breakpoint)을 기억하고 매번 타이핑하기는 매우 고통스럽습니다.
믹스인의 특별한 지시어인 @content를 활용하면, 미디어 쿼리의 뼈대를 미리 만들어두고 그 내부에 원하는 스타일 블록을 나중에 동적으로 주입할 수 있습니다. 이를 통해 반응형 코드를 극도로 직관적이고 깔끔하게 관리할 수 있습니다.
@content는 마치 React의 {children}이나 Vue의 <slot>과 같은 역할을 합니다. 믹스인을 호출할 때 중괄호 {} 안에 작성한 CSS 코드 덩어리 전체를 @content 위치에 통째로 렌더링해 줍니다.
<div class="hero-section">
<h1>반응형 웹사이트 만들기</h1>
<p>창 크기를 줄여보세요!</p>
</div>
/* SCSS 반응형 믹스인 설계 */
/*
// 1. 브레이크포인트 변수 선언
$bp-mobile: 768px;
$bp-tablet: 1024px;
// 2. 미디어 쿼리 믹스인 생성 (@content 가 핵심!)
@mixin mobile {
@media (max-width: #{$bp-mobile}) {
@content; // mixin을 호출할 때 넘겨준 중괄호 {} 안의 내용이 이 자리에 들어갑니다.
}
}
@mixin tablet {
@media (max-width: #{$bp-tablet}) {
@content;
}
}
// 3. 실제 적용
.hero-section {
padding: 100px 50px;
background-color: #f1f5f9;
text-align: center;
font-size: 24px;
// 관련 코드를 분산시키지 않고 이 블록 안에서 바로 반응형 처리!
@include tablet {
padding: 80px 30px;
font-size: 20px;
}
@include mobile {
padding: 50px 15px;
background-color: #cbd5e1; // 모바일에서는 배경색도 변경
font-size: 16px;
}
}
*/
/* 컴파일된 실제 CSS */
.hero-section {
padding: 100px 50px;
background-color: #f1f5f9;
text-align: center;
font-size: 24px;
}
@media (max-width: 1024px) {
.hero-section {
padding: 80px 30px;
font-size: 20px;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 50px 15px;
background-color: #cbd5e1;
font-size: 16px;
}
}