[Sass 특징] @mixin 과 @include

Sass의 유용한 점 중에 하나인 반복되는 내용에 대한

재사용이 용이하다는 것을 가장 잘 증명할 수 있는 것 중 하나가

바로 @mixin 이다.

 

@mixin은 자바스크립트의 함수와 같이 

재사용이 필요한 내용들을 @mixin 문법에 담아놓고

@include를 사용하여 호출한다.

 

1. @mixin 사용

@mixin을 사용하기 위해서는 우선 반복이 되는 내용들을

담아야한다.

@mixin test{
   display:inline-block; border:1px solid #333; color:red; text-align:center;
}

위와 같이 @mixin 뒤에 mixin명 그리고 중괄호를 사용해

그 안에 반복할 css 내용을 넣는다.

(!) @mixin명에 하이푼, 언더스코어 (-, _)를 둘 다 쓸 수 있는데,
    둘 중에 어떤 걸 사용해도 동일한 @mixin명으로 인식한다.

ex) @mixin text-border === @mixin text_border

 

만들어 놓은 @mixin은 비동기 상태로

호출을 하기 위해선 @include를 사용한다.

/* SCSS */
section{
   .box{
      @include test;
   }
}

/* CSS */
section .box {display:inline-block; border:1px solid #333; color:red; text-align:center;}

이처럼 원하는 영역에 @include mixin명 을 사용하여 호출한다.

 

2. @mixin 응용

2-1. @mixin 안에 또 다른 @mixin @include

단순히 @mixin 안에 스타일을 넣고 @include 시키는 것 말고

@mixin 안에 또 다른 @mixin을 @inclue 시킬 수 있다.

(!) @mixin 안에 또 다른 @mixin을 생성하는 것은 안된다.

/* SCSS */
@mixin reset-border{
   border:none;
}

@mixin box{
   width:50px; height:50px; text-align:center;
   @include reset-border;
}

div{
   @include box;
}


/* CSS */
div{width:50px; height:50px; text-align:center; border:none;}

위의 소스처럼 reset-border 라는 @mixin을 box라는 @mixin 안에 @include시킬 수 있다.

 

2-2. 인수 값으로 변경되는 값 조정

@mixin을 만들 때 단순히 @mixin명과 스타일만 넣어서 만드는게 아니라

인수 값을 추가해서 변경되는 값들을

@include할 때마다 바꿔서 호출할 수 있다.

/* SCSS */
@mixin reset-border($border-color, $f-size){
   border:1px solid $border-color; font-size:$f-size;
}

@mixin box{
   width:50px; height:50px; text-align:center;
   @include reset-border(#333, 11px);  /* 혹은 $border-color:#333, $f-size:11px */
}

div{
   @include box;
}


/* CSS */
div{width:50px; height:50px; text-align:center; border:1px solid #333; font-size:11px}

그리고 인수 값에 기본 값 혹은 null 값을 넣을 수 있다.

 

기본적으로 인수 값은 필수로 입력해야하는 사항이지만

null 값을 넣게되면 넣어도 그만 안 넣어도 그만인 값이 된다.

/* SCSS */
@mixin reset-border($border-color:#666, $f-size:null){
   border:1px solid $border-color; font-size:$f-size;
}
div{
   @include reset-border;
}
p{
   @include reset-border($border-color:red, $f-size:14px);
}


/* CSS */
div{border:1px solid #333;}
p{border:1px solid red; font-size:14px;}

위의 소스상에 div의 경우 $f-size를 @include 하면서 따로 지정하지 않아 null 값이 되어

font-size는 따로 출력이 되지 않았다.

 

반면에 p태그의 경우 $f-size를 @include하면서 14px로 지정하여

$border-color의 경우에도 기본 값 #666에서 red로 변경을 하여

그에 맞게 출력 되었다.