Mixin - breakpoint

미디어 쿼리를 믹스인으로 적용하는 방법

@use 'sass:map';

$breakpoints: (
	small:40em,
    medium:65em,
    large:90em
);

@mixin mq($key) {
	$size: map.get($breakpoints, $key);
    
    @media(min-width: $size){
		@content;
	}
}

$breakpoints ?

• @use는 @import를 대신한다. 다만 @import와 달리 더 이상 전역적으로 공유하지는 않는다.
• $는 scss에서 변수를 선언하기 위한 키워드이다.
  - css에서도 변수를 선언할 수 있지만 scss에서 컴파일된 css파일에 변수로 나타나지 않는다.
• $breakpoints는 scss의 map구조로 선언되었다.

@mixin ?

• function은 값을 반환하지만 mixin은 식을 반환한다.
• @include mq() {}를 통해 작성해둔 mixin을 불러올 수 있다.
• 이 때 @content는 mixin을 불러온 시점에서 코드를 작성할 수 있어 유용하다.

즉, @include로 @mixin을 불러왔을 때 인수로 전달된 $key를 map.get을 통해 찾고, $breakpoints에 정의된 값으로 @media에 전달한다.

참조

• 5 Sass features that make it better than vanilla CSS