SCSS 미디어쿼리(Media Query)

오늘의집 클론코딩 프로젝트 하면서 완전히 반응형은 아니더라도 약간의 타블렛, 모바일 환경은 고려하고 싶었다.

 

그와 관련해서 scss 에서 변수와 믹스인이라는 것을 알게 되었다.

---

🔡 변수(Variables)

 

앞부분에 $ 를 붙이면 변수를 선언하여 사용할 수 있다.

 

$black: #000000;
$font-default: 1.2rem;

 

아래와 같이 사용하면 된다.

 

body {
  font-size: #{$font-default};
}

 

📼 믹스인(Mixins)

 

믹스인은 CSS 를 묶어서 재사용할 수 있는 모듈로 만들어 준다.

 

@mixin card-view {
  font-size: 22px;
  border: 1px solid grey;
  border-radius: 4px;
}

 

사용은 아래처럼.

 

div {
  @include card-view;
}

 

🎀 SCSS 미디어쿼리 작성

 

앞서 제시한 믹스인과 변수를 활용하여 미디어쿼리를 작성할 수 있다.

 

 

변수 작성 ✍️

 

모바일, 태블릿, 데스크톱 세 환경을 대응하도록 변수를 선언한다.

 

variables.scss

$breakpoint-mobile: 320px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1024px;

 

 

styles  안에 common, reset, variables 파일이 있다. 

 

추가적으로 파일 앞에 언더바(_) 를 붙이는데, 이는 파일단위로 분리되어 컴파일 되지 않게 하기 위함이다.

 

변수만 따로 저장해놓을 파일이기에 별도의 CSS 파일로 컴파일될 필요가 없기 때문이다.

 

따라서 언더바를 파일명 앞에 붙이면, 성능 및 관리 상의 이득을 얻을 수 있다.

 

 

믹스인 작성 ✍️

 

미디어 쿼리를 이용하기 쉽도록 믹스인으로 작성한다.

 

먼저, 좀 전에 작성한 변수를 불러와 import 해준다.

 

mixin.scss

@import "./variables";

 

미디어 쿼리 내부에는 믹스인이 사용될 때 넘겨받은 content가 들어가도록 했다.

 

@import "./variables";

@mixin mobile {
    @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$breakpoint-desktop}) {
        @content;
    }
}

@mixin moblie-font {
    font-size: 1.3rem;
    line-height: 2rem;

}

 

추가적으로 max-width에서는 -1px를 해줘야 해당 너비에서 정상 동작한다.

 

 

믹스인을 활용한 미디어 쿼리 ✍️

 

main.scss

@import "../../Styles/mixins";

@include mobile {
  .img-card {
    width: 100px;
  }
}

@include tablet {
  .img-card {
    width: 200px;
  }
}

@include desktop {
  .img-card {
    width: 300px;
  }
}

@include media(mobile, tablet, desktop){
   padding-top: 80px;
   padding-bottom: 80px;
}

 

 

💡 (추가) calc() 안에서 scss 변수 사용하기

 

변수에 #{}을 둘러준다.

 

// bad
.problem {
  width: calc(100% - $example);
}

// good
.problem {
  width: calc(100% - #{$example});
}

 

 

---

출처:

https://chaewonkong.github.io/posts/scss-media-query.html

https://ryusm.tistory.com/116