限制LESS Css变量的范围

时间:2018-01-23 13:06:03

标签: css visual-studio less web-essentials

我将LESS Css与Web Essentials和Visual Studio结合使用。

我试图创建一种继承形式,而在整个项目中只能看到特定的变量。例如:

我有一个文件:PublicVar.less

PublicVar包含我想在整个项目中使用的变量。为此,我简单地向每个需要使用内部变量的Less文件添加@import "PublicVar"语句。

但是,PublicVar本身依赖于辅助变量,例如:

在PublicVar.less

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

在BreakpointVar.less

@bp1: 1024px;

他们被分开的原因是为了简洁。

然而,在上面的场景中,每当我导入PublicVar时,intellisense也会向我显示所有其他支持变量 - @ bp1等 - 所以我会得到一堆无关的变量来选择。

如果我将import语句包装在mixin中,则底层变量不会冒泡,但intellisense会显示语法错误。 它仍会编译

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

    @maxWidth:@bp1

@ bp1未被intellisense拾取 - 绿色波浪线(未声明的变量)。

在这两种情况中,最后一种情况更好,因为它掩盖了所有"内部"不应该看到的变量,但是,我想知道是否有更好的方法来实现这种层次结构而不会破坏智能感知。

任何想法都赞赏。

1 个答案:

答案 0 :(得分:0)

在您的PublicVar.less中,可以尝试通过导入作为参考来导入您的帮助:

@import (reference) "BreakpointVar";

Doc about reference