Sass[SCSS] 활용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($다중 변수, @mixin, @content 등을 이용)

Sass[Scss]

Sass[SCSS] 응용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($변수, @mixin, @content 등을 이용) 를 해보도록 할게요. :)

 

보통 Sass 부트스트랩이나 다른곳에서 반응형 미디어쿼리를 활용할때 사용하는 방식이 있습니다.

scss 에서도 비슷하게 많이들 사용하는데 보통 프로젝트마다 반응형 미디어쿼리의 기준 화면 너비들을 미리 설정하고 작업하는 경우가 많습니다.

 

그렇지 않으면 나중에 다 완성된 코드를 보면 반응형 사이즈가 통일성 없이 막 다르게 적용되어 있는 경우가 많아서 scss를 통해서 미리 설정하고 해두면 편합니다.

 

아래 코드를 살펴볼게요.

 

/* mixins.scss */

// (min-width) 변수 설정
$breakpoints-up: (
  xs: '540px',
  sm: '768px',
  md: '992px',
  lg: '1200px',
  xl: '1400px'
);

// (max-width) 변수 설정
$breakpoints-down: (
  xs: '539.98px',
  sm: '767.98px',
  md: '991.98px',
  lg: '1199.98px',
  xl: '1399.98px'
);

// (min-width) mixin 설정
@mixin media-up($size) {
    @media (min-width: map-get($breakpoints-up, $size)) {
        @content;
    }
}

// (max-width) mixin 설정
@mixin media-down($size) {
    @media (max-width: map-get($breakpoints-down, $size)) {
        @content;
    }
}

// (max-width) and (min-width) mixin 설정
@mixin media-between($max-size, $min-size) {
  @media (max-width: map-get($breakpoints-down, $max-size)) and (min-width: map-get($breakpoints-up, $min-size)) {
      @content;
  }
}

 

우선 다중 변수로 min-width와 max-width에 각각 들어갈 사이즈들을 정해둡니다.

저는 예시로 자주 사용하는 사이즈들을 넣어두었습니다. (보통 프로젝트마다 다른 경우가 있어 해당 프로젝트에 맞게 설정해둡니다.)

 

그리고 (min-width), (max-width) 또 (max-width) and (min-width) 이렇게 세개의 @mixin을 설정합니다.

제가 이전에 업로드했던 @mixin 과 다중 변수 등의 게시글을 보시면 아시겠지만 코드를 쭉 보면 크게 어렵지 않습니다.

 

각 @mixin 에 매개변수인 $size 들을 내부에서  미디어 쿼리 너비값으로 map-get을 이용해 할당되도록 설정해 줬습니다.

마지막은 미디어 쿼리 내부에서 @content를 사용해 실제 scss에서 저 위치로 css를 바로 적용할 수 있도록 해줍니다.

 

이러면 나중에 반응형 기준값들이 바뀌게 되어도 다중 변수 내부의 값들만 바꿔주면 전부 일괄변경이 됩니다.

 

다음으로는 저 mixins.scss 를 직접 사용한 예시를 보도록 하겠습니다.

 

@import 'mixins';

.item-box {
  max-width: 1400px;
  margin: 0 auto;

  // 이렇게 안에서 사용이 가능합니다.
  @include media-up(xl) {
      background-color: khaki;
  }

  .item-list {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    height: 100vh;
    margin: 0;
    padding: 0;
    list-style: none;
    .item {
      width: calc(10% - 20px);
      margin: 10px;
      height: 100px;
      background-color: royalblue;

      @include media-between(xl, xs) {
        background-color: crimson;
      };
      @include media-down(xl) {
        width: calc(12.5% - 20px);
      }
      @include media-down(lg) {
        width: calc(20% - 20px);
      }
      @include media-down(md) {
        width: calc(25% - 20px);
      }
      @include media-down(sm) {
        width: calc(33.3333% - 20px);
      }
      @include media-down(xs) {
        width: calc(50% - 20px);
      }
    }
  }
}

// 그냥 평소처럼 밖에서 사용해도 됩니다.
@include media-up(xl) {
  body {
    background-color: lemonchiffon;
  }
}

 

mixins.scss 를 임포트해서 가져와주고 기본적인 코드들을 작성해줬습니다.

저런식으로 @include로 각각 믹스인들을 가져와서 적용해주고 컴파일 해보겠습니다.

 

.item-box {
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 1400px) {
  .item-box {
    background-color: khaki;
  }
}
.item-box .item-list {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
}
.item-box .item-list .item {
  width: calc(10% - 20px);
  margin: 10px;
  height: 100px;
  background-color: royalblue;
}
@media (max-width: 1399.98px) and (min-width: 540px) {
  .item-box .item-list .item {
    background-color: crimson;
  }
}
@media (max-width: 1399.98px) {
  .item-box .item-list .item {
    width: calc(12.5% - 20px);
  }
}
@media (max-width: 1199.98px) {
  .item-box .item-list .item {
    width: calc(20% - 20px);
  }
}
@media (max-width: 991.98px) {
  .item-box .item-list .item {
    width: calc(25% - 20px);
  }
}
@media (max-width: 767.98px) {
  .item-box .item-list .item {
    width: calc(33.3333% - 20px);
  }
}
@media (max-width: 539.98px) {
  .item-box .item-list .item {
    width: calc(50% - 20px);
  }
}

@media (min-width: 1400px) {
  body {
    background-color: lemonchiffon;
  }
}

 

반응형 css들이 설정해둔대로 잘 적용된 결과를 확인할 수 있습니다.

 

마지막으로 위의 코드들을 적용한 HTML 화면을 확인할 수 있는 코드펜 링크를 첨부하도록 하겠습니다.

화면을 줄여가며 확인해보시면 이해가 편하실거에요. :)

 

https://codepen.io/kimyangsun/pen/gOjVVXP

Sass[SCSS] 활용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($다중 변수, @mixin, @content 등을 이용)