less - 简化 LESS 混合

Question

我有一些 LESS 可以根据被传递的一侧（顶部、右侧、底部、左侧或全部）制作边距：

   .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"; }
    }

我的问题是，如果我有这样的身份证：

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

然后 LESS 像这样编译它：

#testfeature {
margin-left:10px;
}

#testfeature {
margin-right:10px;
}

我如何让它像这样编译：

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

Answer 1

摆脱() { ... }包装所有 mixin 样式的不必要的 's。它们导致选择器被奇怪地解释并将它们分成不同的选择，而不是在一个选择下加入所有内容：

.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"simple @px，最后一个 mixin 也应该是：

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

Answer 2

要让它们“分组”，您需要创建一个嵌套和分组的 mixin。下面是一个分组的 mixin 函数，“流线型”用于边距设置。

1. 它需要 1 到 8 个参数；总是成对的positionthen value（除了下面提到的；它可以接受任何位置顺序和autoorinherit的值）。
2. 传递一个“位置”只会0px在该位置设置一个边距。
3. 将非单位编号默认为px，但将明确设置的单位保持为已通过。
4. 传递一个数字值参数会将所有边距设置为该数字。

少混音

.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;
5. .setMargins(25);产生：margin: 25px;
6. .setMargins(auto);产生：margin: auto;

所以你在选择器中使用它：

较少的

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

CSS 输出

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