css - 在 LessCSS 中测试空值

Question

我想在编写变量的 CSS 属性之前测试变量是否已定义。例如:

#someElement {
    if (@variable) {
        background-image: url(@variable);
    }
}

这样做的原因是为了防止当变量为 null 时出现空的 url() 属性值。我似乎无法从 LessCSS 文档中找到任何方法来执行此操作。

Answer 1

以下是“Less Way”中此类问题的解决方式(这就是为什么该功能在 Less 存储库中标记为“低优先级”):

library.less:

@variable: null; // or whatever meaningful non-string value

#someElement {
    & when (isstring(@variable)) {
        background-image: url(@variable);
    }
}

user.less:

@import "library.less";
@variable: "foo.bar/baz.png";

就是这样。