scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기

---

scss에서 미디어 쿼리 다루기

---

scss 에서 미디어 쿼리는 아래와 같이 사용합니다.

@media (max-width: 767px){
    /* 브라우저 사이즈 767px 이하일때*/
}

@media (min-width: 768px) and (max-width: 1023px){
    /* 브라우저 사이즈 768px이상, 1023px이하 일때,*/
}

하지만 코드가 길 경우 위와 같이 사용하면, 코드가 더 길어지고, 보기에 깔끔하지 않습니다.

 

그래서 아래와 같이 mixin을 사용하여 코드를 정리해봅시다.

/*반응형 mixin으로 깔끔하게 사용하기*/
@mixin mobile{
  @media (max-width: 767px){ 
    @content;
  }
}

@mixin tablet{
  @media (min-width: 768px) and (max-width: 1023px){
    @content;
  }
}


@include mobile{ 
  /*브라우저 사이즈767px이하일때*/
}

@include tablet{
  /*브라우저 사이즈768px이상, 1023px 이하일때*/
}

위에서 mixin은 변수 파일에 따로 담아주고, @include를 메인 scss에서 사용합니다.

사용법은 아래를 참고해주세요:)

 

---

변수를 모아놓은 파일을 따로 만들고,

실제 사용할 scss파일에 변수파일을 import합니다.

아래와 같이 사용하면 훨씬 코드가 깔끔해집니다.

 

_utils.scss  (변수만 모아놓은 파일)

/*변수*/
$red: #fa5252;

/*반응형 화면 크기*/
$mobile: 767px;
$tablet: 1023px;
$desktop: 1024px;

/*반응형, 브라우저 크기가 767px 이하일때*/
@mixin mobile{
  @media (max-width: $mobile){
    @content;
  }
}

/*반응형, 브라우저 크기가 768이상, 1023px 이하일때*/
@mixin tablet{
  @media (min-width: $mobile+1) and (max-width: $tablet){
    @content;
  }
}

/*반응형, 브라우저 크기가 1024px 이상일때*/
@mixin desktop{
  @media (min-width: $desktop){
    @content;
  }
}

/*넓이, 높이 자동 계산함수*/
@mixin square($size){
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

 

SassComponent.scss

@import './styles/utils.scss';/*변수파일 import*/

.SassComponent{
  display:flex;
  
  @include mobile{ 
  /*브라우저 사이즈767px이하일때*/
    background: pink;
  }
  @include tablet{
  /*브라우저 사이즈1023px이하일때*/
    background: blanchedalmond;
  }
  @include desktop{
  /*브라우저 사이즈1024px이상일때*/
    background: gray;
  }
  .box{
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;

    &.red{
      background: $red; /*변수파일에 있는 red변수 사용*/
      @include square(5); 
      /* 5를 넣으므로 넓이, 높이를 mixin suqare에서 계산해줌 */
    }
    
  }
}

 

적용된 화면

mobile일때

 

tablet일때

 

desktop일때