Question

我正在使用dotless从管理页面动态更改我的网站外观。

基本上我使用正则表达式来读取less中定义的变量，然后给用户提供更改变量值的选项。

我想要选择设置背景图片。基本上我需要一种方法来检查字符串是否为空，如果它不是然后添加背景图像mixin。

@BackgroundImage: '';

.showBackground(@fileName) when (@fileName != '') {
    background-image: url('../Themes/images/backgrounds/@{fileName}');
}

body {
    .showBackground(@BackgroundImage)
}

所以默认是没有背景''当用户设置背景时变量@BackgroundImage将被设置为'backgroundImage1.jpg'

如何让这个空字符串逻辑起作用？

P.S我尝试将变量设置为＃000000并使用isstring（），但它似乎返回true。

Answer 1

您想使用when not而不是否定条件。

<强> LESS

.showBackground(@fileName) when not (@fileName = '') {
    background-image: url('../Themes/images/backgrounds/@{fileName}');
}

<强>输出

@BackgroundImage: ''; // No output.
@BackgroundImage: 'foo'; // background-image: url('../Themes/images/backgrounds/foo');

Answer 2

这是另一种可能的解决方案，它设置默认值并在不使用变量时检查用例。它试图解决的问题是在某些情况下使用文本作为指标，在其他情况下使用背景图像。

即使有一些重复，这也很好。您的里程可能会有所不同。


    .pointer( @ico ) when not ( @ico ) {
        &:extend(.global-sprite-image);
        .sprite-position(@ico);
        .sprite-height(@ico);
        .sprite-width(@ico);
        content: '';
        margin-left: 2px;
        line-height: 1;
    }

    .pointer( @ico:'›') when ( default() ) {
        content: @ico;
        font-size: 130%;
        font-weight: bold;
        font-family: @font-title;
        padding-left: 2px;
        line-height: 1;
    }

如果字符串不是空条件逻辑，则减少

2 个答案: