Grow your CSS skills. Land your dream job.

Parameterized LESS mixing help…

  • # February 15, 2013 at 3:15 pm

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

    # February 15, 2013 at 6:59 pm

    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`?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".