所有四个方向（上、右、下、左）边距的Less mixin

Question

我该如何编写一个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，例如： 我有这个less代码，但我不想为每个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); 

ty.

- BurebistaRuler

Answer 1

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

- seven-phases-max

Answer 2

如果您想在x、y、...n处使用唯一的数字，可以尝试以下方法：

@iterations: 5;
@step:1;
@number: 4;

.margintype(@number,@step) when (@number = 4)
{
  margin-left: ~"@{step}px";
}
.margintype(@number,@step) when (@number = 3)
{
  margin-bottom: ~"@{step}px";
}
.margintype(@number,@step) when (@number = 2)
{
  margin-right: ~"@{step}px";
}
.margintype(@number,@step) when (@number = 1)
{
  margin-top: ~"@{step}px";
}


.writeclass(@number,@step,@loopcounter) when (@number>0)
{
 .class@{loopcounter}-@{number}{ 

      .margintype(@number,@step); 
  }
  .writeclass(@number - 1,@step,@loopcounter);
}

.loopingClass (@index,@step,@loopcounter) when (@index > 0) {

.writeclass(@number, @index * @step,@loopcounter);
.loopingClass(@index - 1,@step,@loopcounter + 1);
}
.loopingClass (@iterations,@step,0);

这会导致：

.........   
.class3-4 {
  margin-left: 2px;
}
.class3-3 {
  margin-bottom: 2px;
}
.class3-2 {
  margin-right: 2px;
}
.class3-1 {
  margin-top: 2px;
}
.class4-4 {
  margin-left: 1px;
}
.class4-3 {
  margin-bottom: 1px;
}
.class4-2 {
  margin-right: 1px;
}
.class4-1 {
  margin-top: 1px;
} 

- Bass Jobsen

Answer 3

在使用时，您实际上必须使用".class" + "sequence" + "position"。 例如，您的less编译：

.class1-1 {
    margin-top: 1px;
}
.class1-2 {
    margin-right: 1px;
}
.class1-3 {
    margin-bottom: 1px;
}
.class1-4 {
    margin-left: 1px;
}
.class2-1 {
    margin-top: 2px;
}
.class2-2 {
    margin-right: 2px;
}
.class2-3 {
    margin-bottom: 2px;
}
.class2-4 {
    margin-left: 2px;
}
.class3-1 {
    margin-top: 3px;
}
.class3-2 {
    margin-right: 3px;
}
.class3-3 {
    margin-bottom: 3px;
}

.class3-4 {
    margin-left: 3px;
}

而 .make-margins(3); 值实际上是 iterations。

- RulerNature

---

我不太确定我理解你想让我改变什么。.class {.make-margins(3)}只是一个例子。你可以使用.Whatever {.make-margins(@iterations)}代替。 - seven-phases-max