[SCSS] Mixin(믹스인)

재사용할 css선언하는 기능입니다.

@mixin large-text {
  /* 선언 */
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;
  &::after {
    content: '!!';
  }
  span.icon {
    background: url('/images/icon.png');
  }
}
h1 {
  @include large-text; /* 사용 */
}
div {
  @include large-text;
}

가변 인수

입력할 인수의 개수가 불확실한 경우가 있습니다. 그럴 경우 가변 인수를 사용할 수 있습니다.

/* 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음 */
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}
div {
  /* 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달 */
  @include bg(
    100px,
    200px,
    url('/images/a.png') no-repeat 10px 20px,
    url('/images/b.png') no-repeat,
    url('/images/c.png')
  );
}

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있습니다.

SCSS

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  /* icon Mixin의 기존 기능만 사용 */
  @include icon('/images/icon.png');
}
.icon2 {
  /* icon Mixin에 스타일 블록을 추가하여 사용 */
  @include icon('/images/icon.png') {
    position: absolute;
  }
}

Function (함수)

mixin과의 차이점은 mixin 은 style markup 을 반환하지만, function 은 @return 를 통하여 값 을 반환합니다.

$max-width: 980px;
@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns);
}
.box_group {
  width: $max-width;
  .box1 {
    width: columns();
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

@function vs @mixin

• @functoin은 값 하나를 Return
• @mixin은 속성 묶음을 반환