Question

我正在尝试使用一个较少的mixin来接收一个独立的规则集。有没有办法将分离的规则集提取或拆分为属性+值？

@ruleset : {opacity:.5};
.myMixin(.4s, @ruleset);

.myMixin(@duration, @ruleset){
    @ruleset(); <-- looking to split this so I can zero out the property
}

我知道我可以少用一些JS，之前我甚至使用过Math.random（）。也许我可以利用像split（）这样的东西？

Answer 1

您可以将规则集表示为数组：

@ruleset: opacity .5, color red;

所以这个@ruleset是二维数组：[[opacity, .5], [color, red]]。

然后你可以通过数组，用键和值对做你想做的事。

@ruleset: opacity .5, color red;

.myMixin(
  @duration, 
  @array, 
  @iterator: 1
) when(@iterator <= length(@array)) {

  // Get key and value from array
  @name:  extract(extract(@array, @iterator), 1);
  @value: extract(extract(@array, @iterator), 2);

  // Here you have current @name, @value and @duration
  .property-@{iterator} {
    duration: @duration;
    name:     @name;
    value:    @value;
  }

  // Next iteration
  .myMixin(@duration, @array, @iterator + 1);
}
.myMixin(.4s, @ruleset);

此代码将生成以下css：

.property-1 {
  duration: 0.4s;
  name: opacity;
  value: 0.5;
}
.property-2 {
  duration: 0.4s;
  name: color;
  value: red;
}

<强> IMO：我建议你少用复杂的逻辑。对于新的团队成员来说，很难理解这个代码是如何工作的。而且你会忘记这段代码在几周之后是如何工作的。样式必须尽可能简单明了。

是否可以将较少的分离规则集拆分为（转换为属性+值）？

1 个答案: