将多个参数传递给单个 mixin 参数

Question

我知道可以将多个参数传递给混合函数。像这样：

@mixin exampleOne($font-family, $primary-color){
  .address {
    font-family: $font-family;
    color: $primary-color;
  }
}

不过，我想实现这样的事情

@mixin exampleTwo($font-family, $primary-color...){
  .address {
    font-family: $font-family;
    color: $primary-color;
  }
}

所以它会编译：

@include exampleTwo('Avenir', Red, font-weight: 600, text-transform: upperscase)

收件人：

.address {
  font-family: 'Avenir';
  color: red;
  font-weight: 600;
  text-transform: uppercase;
}

我想我的问题是，"Is it possible to pass extra arguments to a mixin, when that mixin has not yet defined those arguments. Just for extendibility. I don't think it's possible to pass an actual "反对“混合参数”。如果你可以，那将回答我的问题。

希望这是有道理的。提前致谢！

Answer 1

在这种情况下最好的做法是使用 map 来保存 property/value 对，例如：

(font-weight: 600, text-transform: uppercase)

然后你可以添加一个参数来保存 mixin 中的映射：

@mixin fonts($font-family, $primary-color, $styles){

然后遍历地图，将样式插入规则中：

@each $property, $value in $styles {
  #{$property}: $value;
}

总而言之：

@mixin fonts($font-family, $primary-color, $styles){
  .address {
    font-family: $font-family;
    color: $primary-color;

    //Loop through styles map
    @each $property, $value in $styles {
      #{$property}: $value;
    }
  }
}

你会这样称呼它：

@include exampleTwo('Avenir', Red, (font-weight: 600, text-transform: uppercase));

这将输出：

.address {
  font-family: "Avenir";
  color: Red;
  font-weight: 600;
  text-transform: uppercase;
}

SassMeister Demo

将多个参数传递给单个 mixin 参数

Pass multiple arguments to single mixin argument

css

sass

mixins