sass를 사용한 미디어쿼리 - 반응형
sass의 장점인 변수 및 모듈 import를 통해 좀 더 쉬운 미디어쿼리작성하기
https://leonkong.cc/posts/scss-media-query.html 참조한 블로그
변수와 mixin, 그리고 미디어쿼리를 이용해서 desktop에 해당하는 틀과 모바일에 해당하는 틀을 만들어 놓는 방법에 대해 설명해 줍니다.
변수는 값을 저장하는 기능을
mixin은 css를 묶어서 모듈화(재사용)하는 기능을 가집니다.
먼저 결과물은 아래와 같습니다.
@import "./mixin";
@include desktop {
//들어갈 scss
}
@include mobile {
//들어갈 scss
}
variables.scss (파일명 앞에 언더바(””)가 붙으면 컴파일이 안됩니다.)
$breakpoint-mobile: 335px; //미디어쿼리에서 min-width가 되는 부분 모바일로서의 최소 크기
$breakpoint-desktop: 758px;//미디어쿼리에서 min-width가 되는 부분 데스크탑으로서의 최소 크기
_mixin.scss mixin을 사용하여 mobile 모듈, desktop모듈을 만들었습니다.
@import "./variables";
@mixin mobile {
@media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$breakpoint-desktop}) {
@content;
}
}
장점
미디어쿼리 안에 scss 문법을 사용할 수 있다. 말고는 사실 크게 없는 듯 하다. 하지만 scss 문법을 사용할 수 있다는 것은 엄청난 장점이다.
단점
없음
live sass compiler - vscode remote ssh 이슈 및 해결
live sass compiler가 ssh 상에서 안되는 이슈가 있었습니다. 구글링을 하면서 vscode-server를 지웠다가 다시 설치, ssh 설정을 다시 설치 및 설정, extension 재설치 등의 시도를 해봤으나 Cannot reconnect Please reload window.라는 문구만 나왔습니다. ssh에서 이 extension을 사용하면 live이기 떄문에 포트를 열어서 서버를 하나 만들게 되는데 그러다보니 그 포트에 해당하는 페이지를 ssh 내에서 열 수 없었기 떄문이 아닐까? 생각합니다. 아니면 방화벽이나 보안 문제라고 생각합니다.
꼭 live 서버를 사용할 필요가 없습니다. 그리고 sass를 컴파일 하는 것이 목표 였습니다. ssh용 live sass compiler가 아니라 그냥 live sass compiler로도 컴파일하여 사용할 수 있기 때문에 이를 선택했습니다. 원인을 찾아서 해결하지는 못하였지만 다른 방법을 찾아서 해결할 수 있었습니다.
*소소한 팁
{
position: absolute; //일 때 중앙 정렬하는 방법
// 박스가 중앙을 기점으로 움직이지 않고 꼭짓점을 기준으로 움직이기 때문에 transform으로 다시 돌려준다.
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
