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”; }
}
My question is that if I have an ID like this:
#testfeature {
.margin(10px,l);
.margin(10px,r);
}
Then LESS compiles it like this:
#testfeature {
margin-left:10px;
}
#testfeature {
margin-right:10px;
}
How do I get it to compile like this:
#testfeature {
margin-left:10px;
margin-right:10px;
}