Breakpoint와 Media Queries

1. mixin으로 breakpoint 설정하기

@mixin md {
  @media (max-width: 768px) {
    @content;
  }
}

2. 만들어둔 mixin을 include로 가져와서 스타일 지정하기

.className{
  @include md {
    background: blue;
  }
}

---

• 변수활용

$screen-md-min: 768px;

@mixin md {
  @media (max-width: #{$screen-md-min}) {
    @content;
  }
}

• 다양한 breakpoint 적용하기

$screen-md-min: 768px;
$screen-xl-min: 1024px;

@mixin md {
  @media (max-width: #{$screen-md-min}) {
    @content;
  }
}
@mixin xl {
  @media (max-width: #{$screen-xl-min}) {
    @content;
  }
}
.testStyle{
	//max-width로 정했으니까 큰기기->작은 기기 순으로 스타일을 쓴다. 
 
  @include xl{
    background: red;
  }
  @include md {
    background: blue;
    color: yellow;
  }
}

https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2