javascript - 减少所有 4 个边距的混合(顶部、右侧、底部、左侧)

Question

我如何将此 css 编写为自动生成所有这些类的 less mixin:

  .class1x{margin-top:1px;}
  .class2x{margin-right:1px;}
  .class3x{margin-bottom:1px;}
  .class4x{margin-left:1px;}
===========================================
  .class1y{margin-top:2x;}
  .class2y{margin-right:2px;}
  .class3y{margin-bottom:2px;}
  .class4ymargin-left:2px;}    
===========================================
  .class1n{margin-top:n..px;}
  .class2n{margin-right:n..px;}
  .class3n{margin-bottom:n..px;}
  .class4nmargin-left:n..px;}  

然后递增该类和值，例如，直到值为 100px。我有这个少，但我不想为每个 css 属性相乘:

@iterations: 30;
.loopingClass (@index) when (@index > 0) {
  .classx@{index} { /*classx the class to add in html*/
    margin: ~"@{index}px"; 
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations); 

很重要。

Answer 1

与 given by @Bass Jobsen 相同的解决方案, 只是轻轻地优化(它不必如此冗长):

// usage:

.class {
    .make-margins(3);
    // or:
    // .make-margins(10, px);
    // .make-margins(50, rem);
    // etc.
}

// implementation:

.make-margins(@i, @u: px) when (@i > 0) {
    .make-margins((@i - 1), @u);
    &@{i} {.margin-x(unit(@i, @u))}
}

.margin-x(@value) {
    &-1 {margin-top:    @value}
    &-2 {margin-right:  @value}
    &-3 {margin-bottom: @value}
    &-4 {margin-left:   @value}
}