Sass/SCSS 문법 5. 믹스인(Mixins)

1. 믹스인(Mixins)은 왜 사용하는가?

스타일 시트를 작성할 떄, 비슷하거나 동일한 스타일을 반복해서 사용해야 하는 때가 있다. 믹스인을 사용하면 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다.

 

2. 믹스인 사용하기(@mixin, @include)

@mixin 지시자로 스타일을 지정하고 @include를 사용해 해당 믹스인을 호출하여 사용한다.  이는 물론 CSS로 컴파일하면 보이지 않는다.

 

mixin을 통해 box-style을 지정하고 .one, .two에서 해당 스타일을 호출했다.

결과

 

mixin을 호출하면서 인자를 사용하여 사용할 수도 있다. 

 

 

//SCSS

@mixin box-style($bg-color){
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $bg-color;
}

.one{
    @include box-style(teal);
    //background: teal;
}
.two{
    @include box-style(tomato);
    //background: tomato;
}

결과

인자를 정의한 경우, 인자를 반드시 전달해야 한다. 전달하지 않으면 에러가 난다.

하지만 인자의 기본값을 정의한다면 에러가 나지 않게 할 수 있다.

 

//SCSS

@mixin box-style($bg-color: yellow){

//배경색 기본값 노랑
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $bg-color;
}

.one{
    @include box-style(teal);
    background: teal;
}
.two{
    @include box-style;
    //background: yellow;
}

//CSS

.one {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: teal;
}

.two {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: yellow;
}/*# sourceMappingURL=style.css.map */

 

@mixin font-style($size, $attr){
    font-size: $size;
    #{$attr}:-1px;
}

h2{
    @include font-style(40px, width)
}

//css
h2 {
  font-size: 40px;
  width: -1px;
}/*# sourceMappingURL=main.css.map */