Sass中带参数混合

SASS 中带参数的混合和 LESS 中也一样

• 不带默认值形参

@mixin whc($w, $h, $c) {
  width: $w;
  height: $h;
  background: $c;
}

.box1 {
  @include whc(300px, 300px, red);
}

.box2 {
  @include whc(200px, 200px, blue);
}

• 带默认值形参

@mixin whc($w: 100px, $h: 100px, $c: #000) {
  width: $w;
  height: $h;
  background: $c;
}

.box1 {
  @include whc();
}

.box2 {
  @include whc(200px, 200px, blue);
}

• 给指定参数赋值

@mixin whc($w: 100px, $h: 100px, $c: #000) {
  width: $w;
  height: $h;
  background: $c;
}

.box1 {
  @include whc(300px, 300px, red);
}

.box2 {
  @include whc($c: blue);
}