Sass[SCSS] 활용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($다중 변수, @mixin, @content 등을 이용)
Sass[SCSS] 응용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($변수, @mixin, @content 등을 이용) 를 해보도록 할게요. :)
보통 Sass 부트스트랩이나 다른곳에서 반응형 미디어쿼리를 활용할때 사용하는 방식이 있습니다.
scss 에서도 비슷하게 많이들 사용하는데 보통 프로젝트마다 반응형 미디어쿼리의 기준 화면 너비들을 미리 설정하고 작업하는 경우가 많습니다.
그렇지 않으면 나중에 다 완성된 코드를 보면 반응형 사이즈가 통일성 없이 막 다르게 적용되어 있는 경우가 많아서 scss를 통해서 미리 설정하고 해두면 편합니다.
아래 코드를 살펴볼게요.
/* mixins.scss */
// (min-width) 변수 설정
$breakpoints-up: (
xs: '540px',
sm: '768px',
md: '992px',
lg: '1200px',
xl: '1400px'
);
// (max-width) 변수 설정
$breakpoints-down: (
xs: '539.98px',
sm: '767.98px',
md: '991.98px',
lg: '1199.98px',
xl: '1399.98px'
);
// (min-width) mixin 설정
@mixin media-up($size) {
@media (min-width: map-get($breakpoints-up, $size)) {
@content;
}
}
// (max-width) mixin 설정
@mixin media-down($size) {
@media (max-width: map-get($breakpoints-down, $size)) {
@content;
}
}
// (max-width) and (min-width) mixin 설정
@mixin media-between($max-size, $min-size) {
@media (max-width: map-get($breakpoints-down, $max-size)) and (min-width: map-get($breakpoints-up, $min-size)) {
@content;
}
}
우선 다중 변수로 min-width와 max-width에 각각 들어갈 사이즈들을 정해둡니다.
저는 예시로 자주 사용하는 사이즈들을 넣어두었습니다. (보통 프로젝트마다 다른 경우가 있어 해당 프로젝트에 맞게 설정해둡니다.)
그리고 (min-width), (max-width) 또 (max-width) and (min-width) 이렇게 세개의 @mixin을 설정합니다.
제가 이전에 업로드했던 @mixin 과 다중 변수 등의 게시글을 보시면 아시겠지만 코드를 쭉 보면 크게 어렵지 않습니다.
각 @mixin 에 매개변수인 $size 들을 내부에서 미디어 쿼리 너비값으로 map-get을 이용해 할당되도록 설정해 줬습니다.
마지막은 미디어 쿼리 내부에서 @content를 사용해 실제 scss에서 저 위치로 css를 바로 적용할 수 있도록 해줍니다.
이러면 나중에 반응형 기준값들이 바뀌게 되어도 다중 변수 내부의 값들만 바꿔주면 전부 일괄변경이 됩니다.
다음으로는 저 mixins.scss 를 직접 사용한 예시를 보도록 하겠습니다.
@import 'mixins';
.item-box {
max-width: 1400px;
margin: 0 auto;
// 이렇게 안에서 사용이 가능합니다.
@include media-up(xl) {
background-color: khaki;
}
.item-list {
display: flex;
align-content: center;
flex-wrap: wrap;
height: 100vh;
margin: 0;
padding: 0;
list-style: none;
.item {
width: calc(10% - 20px);
margin: 10px;
height: 100px;
background-color: royalblue;
@include media-between(xl, xs) {
background-color: crimson;
};
@include media-down(xl) {
width: calc(12.5% - 20px);
}
@include media-down(lg) {
width: calc(20% - 20px);
}
@include media-down(md) {
width: calc(25% - 20px);
}
@include media-down(sm) {
width: calc(33.3333% - 20px);
}
@include media-down(xs) {
width: calc(50% - 20px);
}
}
}
}
// 그냥 평소처럼 밖에서 사용해도 됩니다.
@include media-up(xl) {
body {
background-color: lemonchiffon;
}
}
mixins.scss 를 임포트해서 가져와주고 기본적인 코드들을 작성해줬습니다.
저런식으로 @include로 각각 믹스인들을 가져와서 적용해주고 컴파일 해보겠습니다.
.item-box {
max-width: 1400px;
margin: 0 auto;
}
@media (min-width: 1400px) {
.item-box {
background-color: khaki;
}
}
.item-box .item-list {
display: flex;
align-content: center;
flex-wrap: wrap;
height: 100vh;
margin: 0;
padding: 0;
list-style: none;
}
.item-box .item-list .item {
width: calc(10% - 20px);
margin: 10px;
height: 100px;
background-color: royalblue;
}
@media (max-width: 1399.98px) and (min-width: 540px) {
.item-box .item-list .item {
background-color: crimson;
}
}
@media (max-width: 1399.98px) {
.item-box .item-list .item {
width: calc(12.5% - 20px);
}
}
@media (max-width: 1199.98px) {
.item-box .item-list .item {
width: calc(20% - 20px);
}
}
@media (max-width: 991.98px) {
.item-box .item-list .item {
width: calc(25% - 20px);
}
}
@media (max-width: 767.98px) {
.item-box .item-list .item {
width: calc(33.3333% - 20px);
}
}
@media (max-width: 539.98px) {
.item-box .item-list .item {
width: calc(50% - 20px);
}
}
@media (min-width: 1400px) {
body {
background-color: lemonchiffon;
}
}
반응형 css들이 설정해둔대로 잘 적용된 결과를 확인할 수 있습니다.
마지막으로 위의 코드들을 적용한 HTML 화면을 확인할 수 있는 코드펜 링크를 첨부하도록 하겠습니다.
화면을 줄여가며 확인해보시면 이해가 편하실거에요. :)
https://codepen.io/kimyangsun/pen/gOjVVXP
Sass[SCSS] 활용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($다중 변수, @mixin, @content 등을 이용)
...
codepen.io