scss - 변수, mixin 사용하기

웹 개발을 하다 보면 pc에서 보이는 것과 모바일에서 보이는 것을 구분하고 싶을 때가 있습니다. 헤더의 경우 pc에서는 펼쳐서 보여주고 모바일에서는 햄버거를 이용해서 보여줄 때가 있습니다. 이런 경우 css에서는 media쿼리를 이용해서 개발을 했는데요, scss의 mixin을 이용하면 조금 더 편하게 코딩이 가능합니다.

변수와 mixin 세팅

src 폴더에 _variables.scss 파일을 하나 만듭니다. 이 파일에 변수들을 넣을 것입니다. 저는 992px 아래로는 모바일로 분류하기 때문에 아래와 같이 넣어주었습니다. 헤더의 높이나 하드코딩을 해 둘 변수들을 넣어두면 편합니다.

 

같은 위치에 _mixin.scss 파일을 만들어 줍니다. 아래와 같이 입력해서 pc와 mobile을 구분해 주었습니다. import할때는 variables만 입력해도 됩니다.이제부터 mobile 안에 있는 속성들을 모바일에서만 적용됩니다.

 

실제 사용

@import를 통해 mixin을 import하고 @include를 이용해 사용할 수 있습니다. modile밖에 있는 것은 pc와 mobile 모두 적용됩니다. 하지만 @include mobile안에 있는 것은 mobile에서만 적용되기 때문에 서로 다른 스타일을 쉽게 적용할 수 있습니다. 반응형을 만들 때 많이 도움이 됩니다.