Restrict Scope of LESS Css Variables

Question

I use LESS Css with Web Essentials and Visual Studio.

I'm trying to create a form of inheritance whereas only specific variables can be seen across the project. For instance:

I have a file: PublicVar.less

PublicVar contains variables that I want to use across the project. To do so I simple add an @import "PublicVar" statement to each Less file that needs to use the variables inside.

However, PublicVar itself relies on helper variables, so for instance:

In PublicVar.less

@import "BreakpointVar";
@maxWidth: @bp1;

In BreakpointVar.less

@bp1: 1024px;

The reason they are separated out is for brevity.

However, with the above scenario, whenever I import PublicVar, intellisense also shows me all other supporting variables - @bp1 etc - so I get stacks of irrelevant variables to pick from.

If I wrap the import statement inside a mixin, the underlying variables are not bubbled up but intellisense shows a syntax error. It will still compile though.

.ImportBreakpoint() {
  @import "BreakpointVar";
}
.ImportBreakpoint();

    @maxWidth:@bp1

@bp1 is not picked up by intellisense - green squiggle (undeclared variable).

Out of the two scenarios, the last is better given that it masks all "internal" variables that shouldn't be seen, However, I wonder if there is a better way of achieving this hierarchy without breaking intellisense.

Any ideas appreciated.

Answer 1

In your PublicVar.less can try try to import your helper by importing as a reference :

@import (reference) "BreakpointVar";

Doc about reference