less - 文件级少变量

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 已经提到的，当在同一个范围内定义同一个变量两次时，最后一个声明获胜。您可以将代码包装在 mixin 中或使用命名空间：

// 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;
}