SCSS 의 믹스인 (@mixin) 키워드에 대해 알아보자

개요

@mixin 과 @include 는 sass 혹은 scss 에서 자주 볼 수 있다.

@mixin 을 통해 스타일 그룹을 지정하고 @include 를 통해 만들어놓은 그룹을 이용할 수 있다.

자바에서 사용되는 믹스인과 같은 맥락으로 사용된다.

자바에서의 믹스인 참고

@mixin 기본 사용 예

@mixin 정의

@mixin red-box {
  padding: 10px;
  margin: 5px;
  background-color: red;
}

red-box 라는 믹스인을 정의했다. @mixin 으로 정의했다면, @include 를 이용해 사용할 수 있다.

@include 사용

div {
  @include red-box
}

위와 같이 입력하면,

div {
  padding: 10px;
  margin: 5px;
  background-color: red;
}

결과적으로 위와 같이 적용된다.

@mixin 에 조건문 사용하기

@mixin boxSize($size) {
  @if $size == 'small' {
    width: 10px;
    height: 10px;
  }

  @if $size == 'large' {
    width: 14px;
    height: 14px;
  }

  @else {
    width: 12px;
    height: 12px;
  }
}

작은 박스, 기본 박스, 큰 박스를 구현하기 위해 위와 같이 정의가 가능하다.

div {
  @include boxSize('small');
  @include boxSize;
  @include boxSize('large');
}

위와 같은 형식으로 적용할 수 있다.

@content (@mixin 에 추가적인 CSS 넣기)

@mixin box-default {
  padding: 10px;
  margin: 10px;
  @content;
}

위와 같이 @mixin 정의 아래에 @content 를 추가하면,

div {
  @include box-default {
    background-color: red;
  }
}

@include 를 이용해 @mixin 을 넣을 때 추가적인 CSS 를 더할 수 있다.

@mixin 에 인자 넣기

@mixin box-default($padding, $margin) {
  padding: $padding;
  margin: $margin;
}

위와 같이 인자를 주면,

div {
  @include box-default(10px, 10px);
}

위와 같이 사용할 수 있다.

인자에 기본값 사용해보기

@mixin box-default($padding: 10px, $margin: 10px) {
  padding: $padding;
  margin: $margin;
}

이렇게 기본 값을 설정하는 것도 가능하다.

레퍼런스

• web is free