Question

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

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

我想我的问题是，＆＃34;当mixin尚未定义那些参数时，是否有可能将额外的参数传递给mixin。只是为了扩展性。我不认为可以通过一个真实的＆＃34;对象＆＃34;一个混合论点。如果可以的话，我会回答我的问题。＆＃34;

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

Answer 1

在这种情况下，最好的办法是使用map来保存属性/值对，例如：

(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参数

1 个答案: