Sass 믹스인 및 맵을 사용한 미디어 쿼리

안녕하세요! 오늘은 Sass 믹스인 및 맵과 함께 미디어 쿼리를 사용하는 방법을 배웁니다. 3개의 단계가 있으며 각 단계는 서로 다른 접근 방식과 개념에 중점을 둡니다.

나는 당신이 그것을 즐기시기 바랍니다!

1기

믹스인부터 시작하여 맵을 사용하여 더 복잡한 개념을 살펴보겠습니다.

먼저 인수를 사용하지 않고 상수@media 쿼리를 반환하는 믹스인을 만듭니다.
_media-query.scss

@mixin mq() {
   @media only screen and (min-width: 50em) {
     @content;
  }
}

기본 파일에서 이것을 시도한 경우:
style.scss

@use 'media-query' as *;

:root {
  --fs-400: 1rem;

  @include mq() {
    --fs-400: 1.125rem;
  }
}

컴파일된 CSS는 다음과 같아야 합니다.
style.css

:root {
  --fs-400: 1rem;
}

@media only screen and (min-width: 50em) {
  :root {
    --fs-400: 1.125rem;
  }
}

2기

이제 지도 내부에 매개변수를 전달하여 동적으로 만들 차례입니다.
_media-query.scss

@mixin mq($size) {
   @media only screen and (min-width: $size) {
     @content;
  }
}

그리고 기본 파일에서 인수를 전달해 보십시오.
style.scss

@use 'media-query' as *;

:root {
  --fs-400: 1rem;

  @include mq(50em) {
    --fs-400: 1.125rem;
  }
}

결과는 같아야 합니다.

3기

그러나 더 역동적으로 만드는 것은 여전히 ​​가능합니다.

이제 맵을 추가하고 믹스인과 함께 사용할 수 있습니다. 맵은 JavaScript의 객체 또는 Python의 사전과 동일합니다. 먼저 맵 내부에 일부 중단점을 설정합니다.
_media-query.scss

$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

맵을 사용할 때 맵 내에서 키만 사용할 수 있도록 하여 허수가 떠다니는 것을 방지하고 코드를 더욱 강력하게 만듭니다.

이제 맵 내에서 값을 가져오기 위해 2개의 인수, 즉 선언한 맵과 해당 맵 내부의 키를 사용하는 map-get() 함수를 사용할 수 있습니다. 그리고 키에 연결된 값을 반환합니다. 이제 이 개념을 사용하여...:
_media-query.scss

$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

기본 파일에서 $breakpoints 맵의 키를 mq() 믹스인 내부의 인수로 사용합니다.
style.scss

@use 'media-query' as *;

:root {
  --fs-400: 1rem;

  @include mq('md') {
    --fs-400: 1.125rem;
  }
}

Note: you can quote or unquote the argument inside mq() function according to your own preference. I like quoting it.:)

컴파일된 CSS 파일:
style.css

:root {
  --fs-400: 1rem;
}

@media only screen and (min-width: 50em) {
  :root {
    --fs-400: 1.125rem;
  }
}

또한 보너스 팁으로 @if 및 @else 규칙을 포함하여 미디어 쿼리 유효성 검사를 개선할 수 있습니다.
_media-query.scss

$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @if ($size) {
    @media only screen and (min-width: $size) {
      @content;
    }
  } @else {
    @error '`#{$key}` does not exist in the $breakpoints';
  }
}

중단점 내부의 키만 사용할 수 있는지 확인합니다. 그렇지 않으면 오류가 발생합니다.


GitHub repo에서 코드를 얻을 수 있습니다.

이 기사가 마음에 들면 다른 사람과 공유하는 것을 고려하십시오. 그것은 나에게 세상을 의미합니다.


그게 다야! 나는 당신이 그것을 좋아 바랍니다!