css - 当 bool 值不正确时，如何执行 LESS 守卫？

Question

embeddable 是一个返回 bool 值的自定义 LESS PHP 函数。

当 bool 函数返回 true 时，我可以用 LESS (lessphp) 守卫做一些事情:

.my-mixin(@url) when(embeddable(@url)) {
    background-color: #abc;
}

.smallClass {
    .my-mixin('small.png');
}

它产生:

.smallClass {
    background-color: #abc;
}

正如预期的那样。

不 为真(不是运算符)时我该怎么做。显而易见:

.my-mixin(@url) when(embeddable(@url)) {
        background-color: #abc;
}

.my-mixin(@url) when(not(embeddable(@url))) {
        background-color: #389;
}

.bigClass {
        .my-mixin('big.png');
}

与使用它的 block 一起被默默地丢弃。注意，我保留了守卫的真实版本，所以如果谓词错误，应该使用真实版本。然后我尝试了:

.my-mixin(@url) when(!embeddable(@url)) {
    background-color: #389;
}

代替非版本。

mixin 只是保留在 CSS 中(而不是编译)，尝试使用它的 bigClass block 仍然被默默地丢弃。

同理:

.my-mixin(@url) when(embeddable(@url) != true) {
        background-color: #389;
}

Answer 1

正确的 LESS 语法

请注意您的非 版本代码中的以下更改:

.my-mixin(@url) when (embeddable(@url)) {
        background-color: #abc;
}

.my-mixin(@url) when not (embeddable(@url)) {
        background-color: #389;
}

.bigClass {
        .my-mixin('big.png');
}

注意

根据 lesscss.org site ，“关键字 true 是唯一的真值”，这可能有点令人困惑。这在您的示例中意味着 PHP 函数需要返回值 true 才能命中 true mixin，其他任何内容都将为 false。如果您要传递 1(在编程语言中通常被认为是 true)，或者即使您要从您的示例 'big.png' 传递它也不会与 true 匹配，如此图形化(好像已经传递了值)，这些是各种传递组合的结果:

.my-mixin('big.png') when (true) <-- evaluates to TRUE
.my-mixin('big.png') when (1) <-- evaluates to FALSE
.my-mixin('big.png') when ('big.png') <-- evaluates to FALSE (most confusing)
.my-mixin('big.png') when ('true') <-- evaluates to FALSE (as it is a string)

有关 LESS 这个“真实”方面的进一步讨论，请参阅 this SO answer .