[Sass] Mixin 사용해보기

Mixin

CSS내에서 반복적으로 사용하는 코드들을 재사용할 수 있도록 import 해주는 문법이다.

사용법

@mixin 키워드 뒤에 사용 할 mixin 이름을 지정해준다. 사용하려는 부분에 @include로 선언한 mixin을 호출할 수 있다.
(함수 사용방법과 상당히 유사하다.)

    //mixin 정의
    @mixin text-red() {
        color : red;
    }

    //mixin 호출
    p {
        @include text-red();
    }

css 컴파일 결과 👀

p {
    color: red;
}

파라미터

선언한 mixin에 내부에 사용 할 파라미터도 전달할 수 있다. 또한 파라미터를 사용하지 않을 경우, 호출 시에 괄호를 생략할 수 있다.

@mixin font-style($color) {
	font-size : 12px;
	line-height : 12px;
	letter-spacing : 0.05em;
	color : $color;
}

p {
	@include font-style(#ededed);
}

mixin으로 반응형 구성하기

mixin을 공부하면서 활용한 케이스는 반응형 스타일 작업이었다.
기존 css에서 반응형을 사용하려면 @media query를 사용해 종단점 크기를 정의해서 사용하였다.

/* Tablet */
@media all and (min-width: 768px) {
    /* tablet style */
}
/* Desktop */
@media all and (min-width: 960px) {
    /* desktop style */
}

보여주고자 하는 화면 사이즈로 이동하면서 스타일시트를 작성했다. 이제 mixin을 적용하면 종단점 사이즈를 변수에 정의해서 한번에 변경할 수 있고, @content를 선언해주면 mixin include 선언 후 작성한 스타일을 불러올 수 있기때문에 언제 어디서나 반응형 mixin을 호출하기만 하면 쉽게 사용이 가능하다.

// 종단점 define
$md-breakpoint: 768px;
$lg-breakpoint: 1366px;

// 반응형 mixin
@mixin responsive($screen) {
    @if ($screen == 'Tablet') {
        @media screen and (min-width: $md-breakpoint) {
            @content; //content block 필요 선언
        }
    }

    @if ($screen == 'Desktop') {
        @media screen and (min-width: $lg-breakpoint) {
            @content;
        }
    }
}

/* 태블릿 반응형 */
@include responsive(Tablet) {
	//tablet style..
}

/* 데스크탑 반응형 */
@include responsive(Desktop) {
	//desktop style
}