Less 无文件级变量

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

@block: widget-a;

然后在选择器中使用它

.@{block} {
    // my styles
}

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

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

但是当我有一个以上的街区时，我不能这么做。变量

@block

接受最后一个值，它会打断我的选择器

.@{block} {
    // my styles
}

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

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

那里的两个规则集都得到了block

.widget-b

，尽管这是不同的文件。是否有方法为每个块保留名称

---

这里有一个要点：可以构建并复制它。我使用

小于2.3.0

我不知道为什么必须使用同一个变量名两次？ 您的代码不编译：

您的代码是：

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

应该是：

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

可以重写为，请参见：

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

产出：

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

---

我想你做不到。当为同一个变量定义多个值时，会出现。除了下面的答案外，这里还有一些很好的Less变量，它揭示了初学者常见的陷阱。的确，每个小部件的名称空间或不同文件都是可能的选项。选择器后面的分号是一个输入错误。现在我已经更新了示例。使用mixin的解决方案看起来不错，看起来像JavaScriptiLife，以防万一，还有更详细的解决方案：。