8. 미디어 쿼리 믹스인 (@content)

반응형 웹을 만들 때마다 모바일, 태블릿, 데스크탑의 픽셀(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;
  }
}