Variable scope in LESS?

Question

Less

Tell me, please, I'm trying to set a value for the variable @pageWidth = @viewPortType, that is, @pageWidth: @viewPortType, depending on the width of the viewport window, that is, through mediaqueries. So for

@media only screen and (min-width: 1170px) {
  @viewPortType: 1170px;
}

@media only screen and (max-width: 1170px) {
  @viewPortType: 940px;
}

and so on...
The media queries above are described in a separate file, which is respectively connected to a file with common LESS variables, where the @pageWidth variable is actually initialized. But the compiler throws an error : NameError: variable @viewPortType is undefined. I don’t understand what he doesn’t like, because if the file with media queries is connected. And the @viewPortType variable must be defined.

Answer 1

lesscss.org/features/#features-overview-feature-scope
You are including a file where the @viewPortType variable is defined twice, each time in a different scope. And how can LESS decide which value to use in the main file? No way. Do this:

@viewPortTypeDesktop: 1170px;
@viewPortTypeTablet:  940px;

@media only screen and (min-width: 1170px) {
  @viewPortType: @viewPortTypeDesktop;
}

@media only screen and (max-width: 1170px) {
  @viewPortType: @viewPortTypeTablet;
}

This way you will have two variables (@viewPortTypeDesktop and @viewPortTypeTablet) in global scope that you can use in other files.