在 LessCSS 中，如何将 true 分配给变量？

Question

我是 Less 新手，我正在尝试实现简单的 mixin，但这会引发编译错误：

@show-image: true;

.testimg() when not (@show-image) {
    display: none;
}

img.test {
    .testimg;
}

编译器似乎不喜欢我的 @show-image: true 赋值。我尝试分配数字 1，但结果是

img.test {
    display: none;
}

，这是有道理的（根据 文档）除关键字true之外的任何值都是假的。

但是我可以将关键字 true 分配给我的 @show-image 变量吗？还是它只适用于参数？

Answer 1

Lucho，我同意你的观点......它还很年轻，编译器应该更具描述性，但这并不像你必须定义每个可能的条件（尽管在这种情况下，真/假变量似乎是首先的情况）...只需添加一个失败的“默认”情况，例如“switch”语句：

@show-image: false;

.testimg() when not (@show-image){
    display: none;
}

.testimg(){
    display: inherit;
}

img.test {
    .testimg;
}

Answer 2

知道了！

失败的不是分配。看来你只需要为每个可能的条件定义一个混合默认条件（如@pixshatterer指出< /a>）。

所以就我而言，我只需要这样做：

@show-image: true;

.testimg() when not (@show-image) {
    display: none;
}

.testimg() when (@show-image) {}

img.test {
    .testimg;
}

这让我需要指出关于 Less 的两件事。第一个是关于编译器消息，它们应该更具描述性；第二个是关于语言本身的，我认为不自己定义默认情况仍然太愚蠢了。

不要误会我的意思，我认为 Less 很好，而且它非常适合我当前的需求，我只是说它还很年轻，让你重新考虑将它用于大型、重要的项目。

Answer 3

看起来你没有正确使用它。您需要将 @show-image 传递到函数 .testimg() 中，因此结果应该类似于：

@show-image: true;

.testimg (@show) when not (@show) {
    display: none;
}

img.test {
    .testimg(@show-image);
}

我尝试使用 dotless 并且它一直在 mixin 定义的右括号上给出解析错误。看起来是时候进行错误报告了。