TIL | SCSS Arguments(인수)

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

SCSS

@mixin mixinname($매개변수) {
  style;
}
@include mixinname(인수)

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

SCSS

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

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

⬇️
CSS

.box1 {
  border: 1px dashed red;
}

.box2 {
  border: 4px dashed blue;
}