Send properties as argument for mixin

Question

I'd like to break out all of my Media-queries and pass the CSS properties as arguments instead.

.bp1(@css){
    @media (max-width: 959px){
        @css
    }
}

.bp1(width: 186px;);

Unfortunately, this wont work and makes the Less fail :(

Answer 1

The LESS documentation about mixins says: "Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow."

You can't have anything but css properties and their values, either stated or represented by a variable, in a mixin. So what you're trying to do is invalid.

Answer 2

Starting with Less v1.7.0, it is possible to pass detached rulesets as parameter to a mixin.

Quoting Less Website:

Detached ruleset is a group of CSS properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

Note that the properties that form a part of the ruleset must be enclosed within {}. Also, parentheses (()) are a must after the detached ruleset call (like @css();). Without the parentheses at the end, the call would not work.

.bp1(@css){
    @media (max-width: 959px){
        div{
            @css(); // detached ruleset call
        }
    }
}

.bp1({width: 186px;}); // passing ruleset to mixin

Compiled Output:

@media (max-width: 959px) {
    div {
        width: 186px;
    }
}

---

Alternately, the ruleset can be assigned to a variable which in-turn can be passed in the mixin call like below. This would also produce the same output when compiled.

.bp1(@css){
    @media (max-width: 959px){
        div{
            @css(); // detached ruleset call
        }
    }
}

@ruleset: {width: 186px;};
.bp1(@ruleset);

---

Using this feature, it is possible to pass not only group of properties but also the selectors along with it (like shown below):

.bp1(@css){
    @media (max-width: 959px){
        @css(); // detached ruleset call
    }
}
    
.bp1({
    div{width: 186px;}
    div#header{color: gold;}
});

Compiled Output:

@media (max-width: 959px) {
    div {
        width: 186px;
    }
    div#header {
        color: gold;
    }
}