css - 是否可以将分离的规则集拆分成 less(拆分为属性 + 值)？

Question

我正在尝试制作一个接收分离规则集的 less 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;
}

海事组织: 我建议你尽量避免复杂的逻辑。新团队成员很难理解这段代码是如何工作的。几周后你就会忘记这段代码是如何工作的。 样式必须尽可能简单明了。