mixin은 스타일 시트에서 재사용하게 될 css를 그룹 단위로 저장하는 기능이다.


mixin 정의하기


// @mixin 믹스인이름 {}

@mixin box {}


mixin 사용하기


// @include 믹스인이름;

@include box;



예를 들어, float를 clear 해주는 css는 자주 쓰이게 된다.
이걸 mixin 기능을 이용한다면,



@mixin clear {
    &::after {
        content: '';
        display: block;
        clear: both;
    }
}

div {
    @include clear();
    p{
        float: left;
    }
}


이렇게 clear라는 이름으로 mixin을 만들어서 float를 사용하는 요소마다 적용시킬 수 있다.


css에서는 아래처럼 나타난다.


div::after {
  content: '';
  display: block;
  clear: both;
}

div p {
  float: left;
}



그리고 mixin은 함수처럼 인수를 가질 수도 있다.


@mixin solid-line($width, $color) {
    border: $width solid $color;
}

.box1 {
    @include solid-line(1px, #666);
}
.box2 {
    @include solid-line(1px, red);
}



css에서는 아래처럼 나타난다.


.box1 {
  border: 1px solid #666;
}

.box2 {
  border: 1px solid red;
}