简化LESS mixin [英] Streamline LESS mixin

问题描述

我有一些根据要传递的面(上，右，下，左或全部)来留出边距的一点点:

I have some LESS for making margins based on the side being passed (top, right, bottom, left or all):

   .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:

My question is that if I have an ID like this:

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

然后LESS像这样编译它:

Then LESS compiles it like this:

#testfeature {
margin-left:10px;
}

#testfeature {
margin-right:10px;
}

如何使它像这样编译:

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

推荐答案

摆脱包装所有混合样式的不必要的(){...} .它们导致选择器被奇怪地解释，并将它们分为不同的选择，而不是将所有内容都合并到一个选择下:

Get rid of the unnecessary () { ... }'s that are wrapping all of your mixin styles. They're causing the selectors to be interpreted oddly and separating them into different selections, rather than joining everything under one selection:

.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" ，而只使用 @px ，最后一个mixin应该是:

You could probably also drop the ~"@{px}px" in favor of simply @px, also the last mixin should probably be:

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

这篇关于简化LESS mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！