LESS CSS mixin: how can i hide styles when variable is a specific value?

Question

I've written some mixins for myself that use this standard syntax, and it's really helpful. But I'd like to hide some of the code if a certain value shows up.

Here's what works (breakpoints are fakes, and the ~"" code is a default telling LESS to compile to nothing):

// LESS MIXIN (CURRENT)
.margin(@lg: ~""; @md: ~""; @sm: ~""; @xs: ~""; @xxs: ~"") {
    margin: @lg;
    @media screen and (max-width: 1200px) {
        margin: @md;
    }
    @media screen and (max-width: 800px) {
        margin: @sm;
    }
    @media screen and (max-width: 600px) {
        margin: @xs;
    }
    @media screen and (max-width: 400px) {
        margin: @xxs;
    }
}

which can be implemented like this

// LESS IMPLEMENTATION (CURRENT & EXPECTED)
div {
    .margin(20px; ~""; 15px; ~""; 10px);
}

and will output like this:

/* CSS OUTPUT (CURRENT) */
div {
    margin: 20px;
}
@media screen and (max-width: 1200px) {
    div {
        margin: ;
    }
}
@media screen and (max-width: 800px) {
    div {
        margin: 15px;
    }
}
@media screen and (max-width: 600px) {
    div {
        margin: ;
    }
}
@media screen and (max-width: 400px) {
    div {
        margin: 10px;
    }
}

It's simple and keeps me from doing a ton of @media breakpoints for basic styles. But I'd LOVE to not even print an empty @media line; I'd like the code to compile like this:

/* CSS OUTPUT (DESIRED) */
div {
    margin: 20px;
}
@media screen and (max-width: 800px) {
    div {
        margin: 15px;
    }
}
@media screen and (max-width: 400px) {
    div {
        margin: 10px;
    }
}

SO... I was trying a few things and found this & when code here, but it doesn't seem to work when I implement it here. This is what I've tried:

// LESS MIXIN (FAILED ATTEMPT TO SMARTEN)
.margin(@lg: ~""; @md: ~""; @sm: ~""; @xs: ~""; @xxs: ~"") {
    & when not (@lg = ~"") {
        margin: @lg;
    }
    & when not (@md = ~"") {
        @media screen and (max-width: 1200px) {
            margin: @md;
        }
    }
    & when not (@sm = ~"") {
        @media screen and (max-width: 800px) {
            margin: @sm;
        }
    }
    & when not (@xs = ~"") {
        @media screen and (max-width: 600px) {
            margin: @xs;
        }
    }
    & when not (@xxs = ~"") {
        @media screen and (max-width: 400px) {
            margin: @xxs;
        }
    }
}

Anyone have any ideas to hide the @media code that would work in LESS?

Answer 1

There are a number of ways to apply parts of a mixin depending on the parameters. The easiest I can think of is to use multiple mixins with guards. Disclaimer: I do not recommend this approach for media queries.

.test {
    .example(red; orange; yellow; green; blue);
}

.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when (iscolor(@xl)) {
    @media (min-width: 1200px) {
        background-color: @xl;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@lg)) {
    @media (min-width: 800px) and (max-width: 1199px) {
        background-color: @lg;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@med)) {
    @media (min-width: 600px) and (max-width: 799px) {
        background-color: @med;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@sm)) {
    @media (min-width: 400px) and (max-width: 588px) {
        background-color: @sm;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@xs)) {
    @media (max-width: 399px) {
        background-color: @xs;
    }
}

In this example, each part will be applied depending on which parameters were included when the mixin was called.

---

A better solution for handling media queries is to declare some variables for the various breakpoints used.

I often have a set of variable declarations along the lines of:

@extra-small: ~"                        (max-width:  479px)";
@small:       ~"(min-width:  480px) and (max-width:  767px)";
@medium:      ~"(min-width:  768px) and (max-width: 1023px)";
@large:       ~"(min-width: 1024px) and (max-width: 1199px)";
@extra-large: ~"(min-width: 1200px)                        ";

_{Sometimes I break these down further by using @small: @small-begin and @small-end where @small-begin and @small-end are the individual min-width and max-width declarations.}

These variables can then be used as:

.test {
  background-color: blue;

  @media @small {
    background-color: green;
  }
  @media @medium {
    background-color: yellow;
  }
  @media @large {
    background-color: orange;
  }
  @media @extra-large {
    background-color: red;
  }
}

The advantage to this format is that you only need to specify styles in the media queries that change between breakpoints. You can also add multiple styles within each breakpoint, which reduces the amount of duplicate media query declarations in the output.