재활용 - 인수, 기본값 설정, 키워드 인수, 가변 인수

1. 인수(Arguments)

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

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

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

+믹스인이름(인수)

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

 

 

다음과 같이 인수전달이 된다.

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

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

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

 

 

2. 인수의 기본값 설정

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

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

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

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

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

다음 예시를 보게된다면, 매개변수안에 이미 1px과 black이 설정되어있기 때문에 box1클래스는 dash-line만 호출해도 border값이 다 설정 되어있는걸 볼 수 있다. 

하지만 box2클래스를 보게 된다면, 매개변수를 통해서 4px로 고친걸 볼 수 있다. 매개변수 2번째 값은 설정하지 않았기 때문에 초기값과 똑같이 black으로 나와있는걸 볼 수 있다.

 

 

 

3. 키워드 인수(Keyword Arguments)

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

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

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

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

키워드 인수를 배우게 되는 이유는, 만약에 매개변수가 2개이상이 있는데 첫번째거가 아닌 두번째이상부터의 매개변수에 값을 설정하고 싶을때 문제가 생긴다. 왜냐하면 매개변수는 아무런 조치없이 바로 값을 넣어버리면 첫번째 값부터 순서대로 컴파일이 되기 때문이다. 그래서 첫번째 매개변수가 아닌 두번째이상의 매개변수에서부터 값을 설정하고 싶을때 키워드 인수를 쓰면 된다!

 

 

 

4. 가변 인수(Variable Arguments)

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

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

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

@mixin var($w, $h, $bg...){
    width: $w;
    height: $h;
    background: $bg;
}

.box{
    @include var(
    100px,
    200px,
    url("image/a.png") no-repeat 10px 20px,
    url("image/b.png") no-repeat,
    url("image/c.png")
    );
}

.box {
  width: 100px;
  height: 200px;
  background: url("image/a.png") no-repeat 10px 20px, url("image/b.png") no-repeat, url("image/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)...);
}

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