SCSS 활용 팁 5. 믹스인(mixin)으로 반응형 중단점 쉽게 관리하기

웹페이지를 반응형으로 디자인하는 이유는 사용자의 화면 크기와 방향, 해상도 등에 따라 디자인을 조정하여 최적의 사용자 경험을 제공하기 위해서일 것입니다. 이 때, 각 화면 크기에 맞는 적절한 레이아웃과 스타일을 제공하기 위해 스타일이 변화되는 기준점인 중단점(Breakpoint)을 지정하고 미디어쿼리를 사용하여 작업하게 되는데요. SCSS의 @mixin을 사용하면, 이 작업을 쉽고 편리하게 할 수 있습니다.

 

중단점 설정하기

먼저, 중단점을 변수로 정의합니다. $breakpoints라는 맵을 생성하여 정의하였습니다. 

// 중단점 변수 설정
$breakpoints: (
  xs: 480px,
  sm: 768px,
  md: 1024px,
  lg: 1200px,
  xl: 1440px
);

이제 이를 사용하여 미디어쿼리를 간편하게 호출할 수 있도록 @mixin을 작성하겠습니다.

 

믹스인 작성하기

// 중단점 믹스인
@mixin display($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @error "해당 중단점 '#{$breakpoint}'은 설정되어 있지 않습니다.";
  }
}

map-has-key로 $breakpoints 맵에서 $breakpoint 키가 존재하는지 확인하고, 가져온 값을 기반으로 min-width 미디어 쿼리를 생성하도록 되어있습니다. 키가 존재하지 않을 경우 디버깅을 위해 @error로 메시지가 나오도록 작성했습니다. @content는 믹스인을 호출한 곳에서 전달된 스타일 내용이 들어갑니다. 

 

반응형 버튼 스타일링

작성한 믹스인을 호출하여 사용한 예시입니다.

.button {
  font-size: 14px;
  background-color: blue;

  @include display(sm) {
    font-size: 16px;
    background-color: green;
  }

  @include display(md) {
    font-size: 18px;
    background-color: orange;
  }

  @include display(lg) {
    font-size: 20px;
    background-color: red;
  }
}

이 코드를 css로 컴파일하면 이렇게 됩니다.

.button {
  font-size: 14px;
  background-color: blue;
}

@media (min-width: 768px) {
  .button {
    font-size: 16px;
    background-color: green;
  }
}

@media (min-width: 1024px) {
  .button {
    font-size: 18px;
    background-color: orange;
  }
}

@media (min-width: 1200px) {
  .button {
    font-size: 20px;
    background-color: red;
  }
}

마치며

결과물을 보다시피 순수한 css로 깔끔하게 컴파일되므로 브라우저에 관계없이 사용할 수 있고 코드 재사용성과 유지보수성을 크게 향상시킬 수 있습니다.