Use variable from mixin in ruleset - css

Question

This is the first time I'm using LESS, and I am trying to get some elements to scale based on a media query.
So I figured I'd make a .scale mixin to do this for me.
.scale(#rules) {
#scale-ratio: 1;
#media screen and (min-width: (#page-width)) { #rules(); }
#scale-ratio: 0.8;
#media screen and (min-width: (#page-width * 0.6), max-width(#page-width - 1)) { #rules(); }
#scale-ratio: 0.6;
#media screen and (max-width: (#page-width * 0.6 - 1)) { #rules(); }
}
// Using like
header {
.scale({
width: #page-width * #scale-ratio;
});
}
Is there any way to make it work? Or through another method? I just don't want to fall back to having to write the properties for each media query.
On request the expected output:
#media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
#media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
#media screen and (max-width: 767px) {
header {
width: 768px;
}
}
With this input that's the expected output, but it's just a stripped example.

Answer 1

The variable's scope is limited to the blocks (they behave like constants and the order doesn't affect them). One way to restrict the scope so you can redefine variables is to declare them in &{} blocks.
The mixin below generates the CSS you expect:
.scale(#rules) {
&{
#scale-ratio: 1;
#media screen and (min-width: (#page-width)) { #rules(); }
}
&{
#scale-ratio: 0.8;
#min-width: (#page-width * 0.6);
#max-width: (#page-width - 1);
#media screen and (min-width: (#min-width), ~'max-width: #{max-width}') { #rules(); }
}
&{
#scale-ratio: 0.6;
#media screen and (max-width: (#page-width * 0.6 - 1)) { #rules(); }
}
}
I had to place the max-width part within apostrophes since it was causing an error (I don't really know why).
Using:
#page-width: 1280px;
the result is:
#media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
#media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
#media screen and (max-width: 767px) {
header {
width: 768px;
}
}