SCSS - @mixin, @include

본래 작성하려 하였던 @mixin, @include에 대한 글이다.

@mixin

간단하다. 재사용 할 CSS 그룹이다. 이렇게 선언한 그룹은 @include를 통해 간단히 사용이 가능하다.

@mixin test {
  color: gray;
  font-size: 1rem;
  box-sizing: border-box;
}

@include

위에 선언한 @mixin를 가져다 쓸 수 있게 해주는 예약어이다.

div {
  @include test;
}

기본 예제

단순히 위 2가지로 쓸 수 있는 것이 아닌 변수를 사용하여 좀 더 간단히 사용 할 수 있다.

@mixin test($width: 50px, $height: 100px) {
  color: gray;
  font-size: 1rem;
  box-sizing: border-box;
  width: $width;
  height: $height;
  @content;
}

div {
  @include test(100px, 200px);
}

div li {
  @include test($height: 20px) {
    position: fixed;
  }
}