Streamline LESS mixin(Streamline LESS mixin)

我有基于传递给它的一侧（上，右，下，左或全部），使得利润率有的少：

   .margin(@px,@side) when (@side = top) {
      (){ margin-top: ~"@{px}px"; }
   }
   .margin(@px,@side) when (@side = right) {
      (){ margin-right: ~"@{px}px"; }
   }
   .margin(@px,@side) when (@side = bottom) {
      (){ margin-bottom: ~"@{px}px"; }
   }
   .margin(@px,@side) when (@side = left) {
      (){ margin-left: ~"@{px}px"; }
    }
   .margin(@px,@side) when (@side = all) {
      (){ margin-top: ~"@{px}px";
      margin-right: ~"@{px}px";
      margin-bottom: ~"@{px}px";
      margin-left: ~"@{px}px"; }
    }

我的问题是，如果我有一个这样的ID：

#testfeature {
.margin(10px,l);
.margin(10px,r);
}

再少编译它是这样的：

#testfeature {
margin-left:10px;
}

#testfeature {
margin-right:10px;
}

我如何得到它来编译如下：

#testfeature {
margin-left:10px;
margin-right:10px;
}

Answer 1:

摆脱不必要的() { ... }的被包装所有的混入风格。 他们导致选择被奇怪的解释，将它们分成不同的选择，而不是下一个选择加盟的一切：

.margin(@px,@side) when (@side = top) {
    margin-top: ~"@{px}px";
}
.margin(@px,@side) when (@side = right) {
    margin-right: ~"@{px}px";
}
.margin(@px,@side) when (@side = bottom) {
    margin-bottom: ~"@{px}px";
}
.margin(@px,@side) when (@side = left) {
    margin-left: ~"@{px}px";
}
.margin(@px,@side) when (@side = all) {
    margin-top: ~"@{px}px";
    margin-right: ~"@{px}px";
    margin-bottom: ~"@{px}px";
    margin-left: ~"@{px}px";
}

你很可能也下降了~"@{px}px"赞成简单地@px ，也是最后混入也许应该是：

.margin(@px, @side) when (@side = all) {
    margin: @px;
}

Answer 2:

为了让他们“团”，你需要创建一个嵌套和分组混入。 下面是一个分组混入功能，“流线型”的页边距设置。

1. 时间介于1至8个参数; 总是在对position然后value （除了下面指出的，它可以接受的位置和值的任何顺序auto或inherit被允许）。
2. 路过一个“位置”只是设置一个0px上的那个位置的余量。
3. 默认非单元数量px ，但通过不断明确设定单位。
4. 传递一个参数是数值将所有的页边距设置为这个数字平分。

LESS Mixin

.setMargins(@s1: ~'', @v1: 0, @s2: ~'', @v2: 0, @s3: ~'', @v3: 0, @s4: ~'', @v4: 0) {

   .setPos(top, @T) {
        .setNum() when (isnumber(@T)) {
           margin-top: @T * 1px;
        }
        .setNum() when not (isnumber(@T)){
           margin-top: @T;
        }
        .setNum();
    }
   .setPos(right, @R) {
        .setNum() when (isnumber(@R)) {
           margin-right: @R * 1px;
        }
        .setNum() when not (isnumber(@R)) {
           margin-right: @R;
        }
        .setNum();
    }
   .setPos(bottom, @B) {
        .setNum() when (isnumber(@B)) {
           margin-bottom: @B * 1px;
        }
        .setNum() when not(isnumber(@B)) {
           margin-bottom: @B;
        }
        .setNum();
    }
   .setPos(left, @L) {
        .setNum() when (isnumber(@L)) {
           margin-left: @L * 1px;
        }
        .setNum() when not (isnumber(@L)) {
           margin-left: @L;
        }
        .setNum();
    }
   //allows all to be called with one number or value
   .setPos(@A, 0) when (isnumber(@A)) {
           margin: @A * 1px;
   }
   .setPos(auto, 0) {
           margin: auto;
   }
   .setPos(inherit, 0) {
           margin: inherit;
   }
   //default null if no valid side given
   .setPos(@other, 0) {}
   //call all possible positions
   .setPos(@s1, @v1);
   .setPos(@s2, @v2);
   .setPos(@s3, @v3);
   .setPos(@s4, @v4);
}

例子

1. .setMargins(right); 产生margin-right: 0px;
2. .setMargins(right, 15); 产生margin-right: 15px;
3. .setMargins(left, 10em); 产生margin-left: 10em;
4. .setMargins(top, 12, right, 10); 生产： margin-top: 12px; margin-right: 10px; margin-top: 12px; margin-right: 10px;
5. .setMargins(25); 生产： margin: 25px;
6. .setMargins(auto); 生产： margin: auto;

所以你在选择使用它：

减

#testfeature {
   .setMargins(left, 10, right, 10);
}

CSS输出

#testfeature {
  margin-left: 10px;
  margin-right: 10px;
}

文章来源: Streamline LESS mixin