SCSS 미디어쿼리 및 실무

실무에서 mixin을 만들기는 어렵다.
따라서 깃허브에서 _mixin.scss 을 치면 사람들이 미리 만들어놓은거를 볼 수 있다.
난 여기를 참고해서 쓰는게 좋을듯해서 링크 남긴다.

앞서 말한 곳에서 미디어쿼리를 가져다 쓸 수도 있지만,
정의해서 쓰면 더 편할거같아서 한번 만들어보았다.

$xs: "screen and (max-width:390px)";
$sm: "screen and (max-width:568px)";
$md: "screen and (max-width:768px)";
$lg: "screen and (max-width:1024px)";
$xl: "screen and (max-width:1280px)";

.card {
  width: 300px;
  aspect-ratio: 1 / 2;
  background-color: antiquewhite;
}

@media #{$lg} {
  .card {
    width: 200px;
  }
}
@media #{$md} {
  .card {
    width: 150px;
  }
}
@media #{$sm} {
  .card {
    width: 200px;
  }
}
@media #{$xs} {
  .card {
    width: 50px;
  }
}