文件级少变量

Question

我想在其文件的开头立即定义块名称

@block: widget-a;

然后在选择器中使用它

.@{block} {
    // my styles
}

但是当我有一个以上的块时我就做不到了。变量 @block 采用最后一个值，它破坏了我的选择器

// file a.less
@block: widget-a;
.@{block} {
    // styles for widget-a
}

// file b.less
@block: widget-b;
.@{block} {
    // styles for widget-b
}

尽管文件不同，但那里的两个规则集都得到了块 .widget-b。有没有办法为每个块保留名称？

这是一个要点：https://gist.github.com/just-boris/a86f3646f48683a9bf17 可以构建和复制它。我用 less 2.3.0

Answer 1

我不确定你为什么要使用同一个变量名两次？您的代码无法编译：

你的代码：

// file a.less
@block: ~".widget-a";
@{block}: {
    // styles for widget-a
}

应该是：

// file a.less
@block: ~".widget-a";
@{block} {
    // styles for widget-a
}

可以改写为，见variable-interpolation:

@block: widget-a;
.@{block} {
    // styles for widget-a
    color: red;
}

正如@harry 已经提到的，当在同一个范围内定义同一个变量两次时，最后一个声明获胜。您可以将代码包装在混合中或使用 namespaces:

// file a.less
.a() {
@block: widget-a;
.@{block} {
    // styles for widget-a
    color: red;
}
}
.a();

// file b.less
.b() {
@block: widget-b;
.@{block} {
    // styles for widget-b
    color:blue;
}
}
.b();

输出：

.widget-a {
  color: red;
}
.widget-b {
  color: blue;
}

文件级少变量

File-level less variables

less

bem