SCSS에서 @mixin 사용하기

SCSS는 반복되는 typing을 줄이기 위한 방법으로 @mixin을 지원한다.

보통은 browser 호환성을 위해 -webkit, -ms 등의 code를 반복하는 것을 @mixin을 활용하여 한번 지정하고 @include하여 재사용하는 방식으로 사용한다.

대략적인 사용예는 다음과 같다.

본 글은 @mixin을 사용하는 방법을 알기위한 예제이기 때문에 실제 사용시에는 좀 더 유연하게 작성할 필요가 있다.

transform 중 translateY를 자주 사용한다고 하면 browser별 처리를 위해 @mixin을 정의한다.

@mixin transform-translateY($y) {
-webkit-transform:translateY($y);
-ms-transform:translateY($y);
-moz-transform:translateY($y);
-o-transform:translateY($y);
transform:translateY($y);
}

정의된 @mixin을 활용하면 아래처럼 간단하게 사용할 수 있다.

.someclass {
@include transform-rotateY(10px);
}

만약 값의 단순 대입이 아니라 selector, property name, property value에서 어떤 연산 후 대치가 필요한 경우 interpolation을 사용할 수도 있다.

@mixin transform-rotate($degrees) {
-webkit-transform: rotate(#{$degrees}deg);
-ms-transform:rotate(#{$degrees}deg);
-moz-transform:rotate(#{$degrees}deg);
-o-transform:rotate(#{$degrees}deg);
transform:rotate(#{$degrees}deg);
}

다음과 같이 사용하면 된다.

.someclass{
@include transform-rotate(10);
}

참고로 CSS에서 속성값을 %와 px연산이 필요한 경우 calc() 사용하기 글의 calc()를 @mixin을 사용해 적용하면 다음과 같이 정의할 수 있다.

@mixin calc($key, $value) {
#{$key}: -webkit-calc(#{$value});
#{$key}: -moz-calc(#{$value});
#{$key}: calc(#{$value});
}

사용시에는 다음과 같이 한다.

.someclass {
@include calc(top, ‘100% – 10px’);
}

@mixin에 대한 좀 더 자세한 내용은 Sass Basics page의 Mixins를 참조한다.

또한 interpolation에 대한 좀 더 자세한 내용은 Sass reference page를 참조한다.