Less global variable and mixin usage in media-queries - less

Question

I've got a problem when using global varibale in a mixin which is used in #media-query.
Point is in different #media-query the variable is rewrited. So I would like the mixin to use updated value but it doesnt seem to do it.
Here's whats bugging me:
#base-font-size: 18px;
#modifier: 7;
// font size for elements that are not headings
// if I pass "clean" as second arg then the line-height will be same as font size
// dont focus on it - #modifier is the problem
.font(#size, #line-height) when (#line-height = clean) {
font-size: #size;
line-height: #size;
}
.font(#size, #line-height: true) when not (#line-height = clean) {
font-size: #size;
line-height: unit((#size + #modifier), px);
}
body {
.font(#base-font-size);
}
#media (max-width: 800px) {
#base-font-size: 18px;
#modifier: 5;
body {
.font(#base-font-size);
color: red;
}
}
It compiles into:
body {
font-size: 18px;
line-height: 25px;
}
#media (max-width: 800px) {
body {
font-size: 18px;
line-height: 25px;
color: red;
}
}
The #modifier value in #media has changed.
If I would like to use it in #media like this: line-height: #modifier+#base-font-size then the new value would be used and everything is ok.
But when I want to use this new value in a mixin and use this mixin in #media - then this mixin is using old value(7) not the new one(5).
Could anyone please advice where I made my mistake and if's a less bug (1.3.3) how can change my mixin to avoid it?

Answer 1

I've solved this.
I needed to define one more var: #media and vary my mixins so that they will or wont be used in particular cases.
#media: desktop;
#base-font-size: 10px;
#mod-desktop: 10;
#mod-mobile: 1px;
.font(#size, #line-height) when (#line-height = clean) and (#media = desktop) {
font-size: #size;
line-height: #size;
}
.font(#size, #line-height: true) when not (#line-height = clean) and (#media = desktop) {
#mod: #mod-desktop;
font-size: #size;
line-height: unit((#size + #mod-desktop), px);
}
.font(#size, #line-height) when (#line-height = clean) and (#media = mobile) {
font-size: #size;
line-height: #size;
}
.font(#size, #line-height: true) when not (#line-height = clean) and (#media = mobile) {
#mod: #mod-mobile;
font-size: #size;
line-height: unit((#size + #mod-mobile), px);
}
body {
.font(#base-font-size); // this will use font-size from top of the file
}
#media (max-width: 800px) {
#media: mobile;
#base-font-size: 5px;
body {
// this will use the font-size from #media scope and mixin for mobile will be called
.font(#base-font-size);
}
}