[SCSS] @mixin 과 @include

@mixin and @include

@mixin은 스타일 시트 전체에서 재사용할 css 선언 그룹을 정의하는 아주 훌륭한 기능이다.

@mixin을 사용하여 선언 하고 @include를 통해 사용한다.

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

to css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

인수 (Arguments)

@mixin은 마치 함수(function)처럼 인수(Arguments)를 가질 수 있다.

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

 

to css

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

보간 #{}을 활용하면 인수를 좀 더 다양한 방면에서 사용할 수 있다.

인수의 기본값 설정

일반적으로 @mixin이 선언하는 모든 인수는 전부 전달해야 하는데, 인수가 전달되지 않을 경우 사용할 기본값을 미리 정의하여 인수를 선택 사항으로 만들 수 있다.

@mixin rtl($property, $ltr-value: left, $rtl-value: right) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float);
}

to css

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

키워드 인수

@mixin에 전달할 인수를 입력할 때 명시적으로 키워드(변수)를 지정하여 입력할 수 있다.

즉, 별도의 인수 입력 순서에 상관없이 특정 변수에 값을 지정해서 입력할 수 있다는 의미이다.

하지만 키워드 인수를 사용할 경우 만약 작성하지 않은 인수가 에러를 발생하지 않도록 기본값이 지정되어있는 게 좋다.

@mixin position(
  $p: absolute,
  $t: null,
  $b: null,
  $l: null,
  $r: null
) {
  position: $p;
  top: $t;
  bottom: $b;
  left: $l;
  right: $r;
}
 
.absolute {
  /* 키워드 인수로 설정할 값만 전달 */
  @include position($b: 10px, $r: 20px);
}
 
.fixed {
  /* 인수가 많아짐에 따라 가독성을 확보하기 위해 줄바꿈 */
  @include position(
    fixed,
    $t: 30px,
    $r: 40px
  );
}

to css

.absolute {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 30px;
  right: 40px;
}

가변/임의 인수

인수의 개수가 불확실한 경우 사용하는건데, 모던 JS에서 사용하는 것과 마찬가지로 매개변수 뒤에 ...을 붙여주면 된다.

// 인수를 순서대로 하나씩 전달 받다가, 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")
  );
}

to css

div {
  width: 100px;
  height: 200px;
  background: url("/images/a.png") no-repeat 10px 20px,
              url("/images/b.png") no-repeat,
              url("/images/c.png");
}

 

추가적으로 배열 형식의 매개변수를 전달할 때 역시 사용할 수 있다.

@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}

to css

div {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
}
span {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  font-family: sans-serif;
}
a {
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  font-family: monospace;
}

콘텐츠 블록 (@content)

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

나중에 @include할 때 사용된 블록 내용이 @content 부분에 나타나게 된다.

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

to css

.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}

---

참고: https://sass-lang.com/documentation/at-rules/mixin

Sass: @mixin and @include

참고: https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!