TIL | SCSS Keyword Arguments(키워드 인수)

@mixin mixinname($매개변수A: 기본값, $매개변수B: 기본값) {
  style;
}

@include mixinname($매개변수B: 인수);

Mixin에 전달할 인수를 입력할 때 명시적으로 키워드를 입력하여 작성할 수 있다.
별도의 인수 입력 순서가 필요하지 않아 편리하게 작성할 수 있다.

SCSS

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

.box1 {
  @include dash-line;
}

.box2 {
  @include dash-line($color: blue);
}

⬇️
CSS

.box1 {
  border: 1px dashed black;
}

.box2 {
  border: 1px dashed blue;
}