如何优化我的 LESS mixin？答案

【问题标题】：How to optimize my LESS mixin?如何优化我的 LESS mixin？
【发布时间】：2015-02-15 10:41:24
【问题描述】：

这个 mixin 为 Bootstrap 生成帮助类。

我确信有办法使用循环来改进这个 mixin。

.generate-margin-tops(@size) {
  .mt-@{size}-5 {
    margin-top: 5px;
  }

  .mt-@{size}-10 {
    margin-top: 10px;
  }

  .mt-@{size}-20 {
    margin-top: 20px;
  }

  .mt-@{size}-30 {
    margin-top: 30px;
  }

  .mt-@{size}-40 {
    margin-top: 40px;
  }
}

片段用于不同的屏幕尺寸：

.generate-margin-tops(xs);

@media (min-width: @screen-sm-min) {
  .generate-margin-tops(sm);
}

@media (min-width: @screen-md-min) {
  .generate-margin-tops(md);
}

@media (min-width: @screen-lg-min) {
  .generate-margin-tops(lg);
}

附注看我的决赛solution

【问题讨论】：

@size 变量是什么？它有什么价值。顺便说一句，是的，这可以使用循环来改进。

标签： twitter-bootstrap less less-mixins

【解决方案1】：

这可以使用如下循环来简化（在 cmets 中内嵌解释）：

.generate-margin-tops(@size, @index) when (@index > 0) {
    @margin-top: extract(@margin-px, @index); //extract the margin value corresponding to the index/counter variable
    .mt-@{size}-@{margin-top} { //selector interpolation to form the selector
        margin-top: unit(@margin-top,px); //converts plain number to px units
    }
    .generate-margin-tops(@size, @index - 1); //call to the next iteration by decrementing the counter
}

@margin-px: 5, 10, 20, 30, 40; //array list variable which contains the various margin pixels

.generate-margin-tops(xs, length(@margin-px)); //call to loop mixin

@media (min-width: @screen-sm-min) {
  .generate-margin-tops(sm, length(@margin-px));
}

@media (min-width: @screen-md-min) {
  .generate-margin-tops(md, length(@margin-px));
}

@media (min-width: @screen-lg-min) {
  .generate-margin-tops(lg, length(@margin-px));
}

【讨论】：

我不知道extract函数。杰出的！我会尽快将您的答案标记为正确
@PiONeeR：很高兴知道它帮助了伙伴:) 我还更新了示例中下一次迭代的 mixin 调用（之前它被硬编码为 xs）。我相信您会发现并正确，但不想半途而废:)
我还做了一些边距作为变量@margin-tops-count: length(@margin-tops); :)
@PiONeeR：是的，这是我们可以做的另一件事，顺便感谢您的标记和投票。非常感谢:)

【解决方案2】：

@Harry 极大地帮助我处理更少的循环。最终我找到了这个解决方案：

@margin-tops: quarter 0.25, half 0.5, one 1, two 2, three 3, four 4;

.generate-margin-tops(@suffix: ~'', @i: 1) when (@i =< length(@margin-tops)) {
  @item:  extract(@margin-tops, @i);
  @key:   extract(@item, 1);
  @value: extract(@item, 2);

  .mt-@{key}@{suffix} {
    margin-top: @line-height-computed * @value;
  }

  .generate-margin-tops(@suffix, @i + 1);
}

.generate-margin-tops(-sm) 的结果是：

.mt-quarter-sm { margin-top: 5px }
.mt-half-sm { margin-top: 10px }
.mt-one-sm { margin-top: 20px }
.mt-two-sm { margin-top: 40px }
.mt-three-sm { margin-top: 60px }
.mt-four-sm { margin-top: 80px }

【讨论】：