treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Parameterized LESS mixing help...

  • 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;
        }
    
  • As far as I know, you cannot with LESS. Two mixins mean two CSS declarations, unfortunately.

    By the way, I am not sure I understand the point of those mixins. Is .margin(10px, left) easier to right than margin-left: 10px?