Mixin

• Mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 CSS스타일을 정의할 수 있다.

1. Mixin 정의

/* 1. arguments(인수)가 없을 경우 */
@mixin mixin-name {
  // css code
}

/* 2. arguments(인수)를 사용할 경우 */
@mixin mixin-name($arg1, $arg2, ...) {
  // css code
}

/* 3. arguments(인수)가 없을 경우 기본값을 설정하여 출력 */
@mixin mixini-name($arg1: 기본값설정1, $arg2: 기본값설정2, ...){
  // css code
}

2. Mixin 사용

@include mixin-name;

/* arguments(인수)가 있는 경우 */
@include mixin-name($arg1, $arg2, ...);

3. Mixin 예제

/* 1번예제 - 기본 */
/* SCSS */
@mixin color {
  color: red;
}
p {
  @include color;
}

/* css */
p {
  color: red;
}

/* 2번예제 - argument사용 */
/* SCSS */
@mixin color($color){
  color: $color
}
p {
  @include color(#ffaaaa);
}

/* css */
p {
  color: #ffaaaa;
}

/* 3번예제 - arguments(인수)가 없을 경우 기본값을 설정 */
/* SCSS */
@mixin title($color: #ffaaaa, $size: 10px) {
  color: $color;
  font-size: $size;
}
h1 {
  @include title(red);
}

/* css */
h1 {
  color: red; /* 인수에 red를 넣어서 red로 출력 */
  font-size: 10px; /* 인수에 기본값이 설정 되어있어서 10px로 출력 */
}