How to override less variable in media query?

Development Plone 6 UI (Volto)
1

site.variables:

@documentationsidebarWidth: 360px;
// sidebar wider for big screens
@media only screen and (min-width: 1600px) {
    @documentationsidebarWidth: 460px;
}

This does not have any effect.
I think the less files using the variable need to be imported again with (multiple).
But I am stuck with the dependency of the various *.less, *.variable and *.overrides
Any hint appreciated!

2

I don't think this is possible: LESS CSS set variables in media query? - Stack Overflow

1 Like
3

As Peter was saying, this is probably not possible and the solution is to use CSS Properties.

The key to understanding is to grok the core nature of less: it's a really simple compiler, you could almost say that all it does is variable declaration and string substitution. The result of compiling a less fragment with a variable declaration is just nothing:

@documentationsidebarWidth: 360px;

when transformed to css, gives you an empty string.