[Sass/SCSS] 재활용(Mixins) - 인수(Arguments)

Sass(SCSS) 재활용(Mixins) - 인수(Arguments)

• Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다.
• 하나의 Mixin으로 다양한 결과를 만들 수 있습니다.

인수(Arguments)

• 매개변수(Parameters)란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다.
• 제공되는 여러 데이터들을 전달인수(Arguments) 라고 부른다.

@mixin 믹스인이름($매개변수) {
  스타일;
}

@include 믹스인이름(인수);

• SCSS:

@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }

• Sass:

=믹스인이름($매개변수)
  스타일

+믹스인이름(인수)

• Compiled to:

.box1 {
  border: 1px dashed red;
}
.box2 {
  border: 4px dashed blue;
}

인수의 기본값 설정

• 인수(argument)는 기본값(default value)을 가질 수 있습니다.
• @include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용됩니다.

@mixin 믹스인이름($매개변수: 기본값) {
  스타일;
}

• SCSS:

@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}

.box1 { @include dash-line; }
.box2 { @include dash-line(4px); }

• Compiled to:

.box1 {
  border: 1px dashed black;
}
.box2 {
  border: 4px dashed black;
}

키워드 인수(Keyword Arguments)

• Mixin에 전달할 인수를 입력할 때 명시적으로 키워드(변수)를 입력하여 작성할 수 있습니다.
• 별도의 인수 입력 순서를 필요로 하지 않아 편리하게 작성할 수 있습니다.
• 단, 작성하지 않은 인수가 적용될 수 있도록 기본값을 설정해 주는 것이 좋습니다.

@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) {
  스타일;
}

@include 믹스인이름($매개변수B: 인수);

• SCSS:

@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
  );
}

• Compiled to:

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

가변 인수(Variable Arguments)

• 때때로 입력할 인수의 개수가 불확실한 경우가 있습니다.
• 그럴 경우 가변 인수를 사용할 수 있습니다.
• 가변 인수는 매개변수 뒤에 ...을 붙여줍니다.

@mixin 믹스인이름($매개변수...) {
  스타일;
}

@include 믹스인이름(인수A, 인수B, 인수C);

• SCSS:

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

• Compiled to:

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

• 위에선 인수를 받는 매개변수에 ...을 사용하여 가변 인수를 활용했습니다. 이번엔 반대로 가변 인수를 전달할 값으로 사용해 보겠습니다.

• SCSS:

@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)...);
}

• Compiled to:

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;
}