Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Parameterized LESS mixing help…

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #42766

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

    #124839
    Kitty Giraudel
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.