当布尔值不为真时,如何执行LESS保护?

Mat*_*hen 3 css guard not-operator less

embeddable是一个返回布尔值的自定义LESS PHP函数.

当布尔函数返回true时,我可以使用LESS(lessphp)保护执行某些操作:

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

.smallClass {
    .my-mixin('small.png');
}
Run Code Online (Sandbox Code Playgroud)

它产生:

.smallClass {
    background-color: #abc;
}
Run Code Online (Sandbox Code Playgroud)

正如所料.

我怎么做时,是不是真的(非运营商).显而易见的:

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

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

.bigClass {
        .my-mixin('big.png');
}
Run Code Online (Sandbox Code Playgroud)

静静地丢弃,以及使用它的块.注意,我保留了守卫的真实版本,所以如果谓词错误,应该使用真正的版本.然后我尝试了:

.my-mixin(@url) when(!embeddable(@url)) {
    background-color: #389;
}
Run Code Online (Sandbox Code Playgroud)

取代不是版本.

mixin只是保存在CSS中(而不是编译),并且尝试使用它的bigClass块仍然会被静默删除.

与:相同:

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

Sco*_*ttS 5

适当的LESS语法

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

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

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

.bigClass {
        .my-mixin('big.png');
}
Run Code Online (Sandbox Code Playgroud)

警告

根据lesscss.org网站,"关键字true是唯一真正的价值",这可能有些令人困惑.在您的示例中,这意味着PHP函数需要返回值true以获得对truemixin 的命中,其他任何内容都将为false.如果你要传递1(通常在编程语言中被认为是真的),或者即使你从你的例子中传递'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)
Run Code Online (Sandbox Code Playgroud)

关于LESS这个"真实"方面的进一步讨论,请参阅此SO答案.