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中或使用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;
}

文件级较少的变量

1 个答案: