Less variables in media queries

We have the following code:

@baseWidth: 100%;

div.div1 {
    width: @baseWidth / 4;
    float: left;
    height: 100% / 3;
}

div.div2 {
    width: @baseWidth - 15%;
    font-size: 16px;

    span.span1 {
        display: inline-block;
        width: @baseWidth / 2 - 15%;
    }
}

which translates into the following code:

div.div1 {
    width: 25%;
    float: left;
    height: 33.333%;
}

div.div2 {
    width: 85%;
    font-size: 16px;
}

div.div2 span.span1 {
    display: inline-block;
    width: 35%;
}

However, I would want to have the baseWidth at 80% if the screen resolution is lower than 1025px, so my basic instinct is to do this, which is very readable and nice:

@baseWidth: 100%;

@media (max-width: 1024px) {
    @baseWidth: 80%;
}

div.div1 {
    width: @baseWidth / 4;
    float: left;
    height: 100% / 3;
}

div.div2 {
    width: @baseWidth - 15%;
    font-size: 16px;

    span.span1 {
        display: inline-block;
        width: @baseWidth / 2 - 15%;
    }
}

However, this doesn’t work, of course, because variables are evaluated at compile time, media queries at runtime.

But how about auto-creating media-queries for every property in every selector that uses that variable? That would translate into:

div.div1 {
    width: 25%;
    float: left;
    height: 33.333%;
}

@media (max-width: 1024px) {
    div.div1 {
        width: 20%;
    }
}

div.div2 {
    width: 85%;
    font-size: 16px;
}

@media (max-width: 1024px) {
    div.div2 {
        width: 65%;
    }
}

div.div2 span.span1 {
    display: inline-block;
    width: 35%;
}

@media (max-width: 1024px) {
    div.div2 span.span1 {
        width: 5%;
    }
}

The algorithm could be optimized to group media queries and stuff, but you get the idea.

[MadLittleMods]

This was implemented in postcss-css-variables.

[seven-phases-max]

Hmm, yes, while these FRs (this one and #1192) started with a bit different things in mind they ended as an exactly the same story (“Less to implicitly autogenerate CSS rulesets/properties depending on different variable values inside media queries”).

Well, I guess it’s safe to close this by now too. In summary: while theoretically this is possible, in practice it would require too complex implementation, but what’s more important it would be too magical and too weird to use.

In short: learn and use mixins.