Question

我需要根据条件在LESS中设置变量。

@body-background-color: black;
@post-background-color: white;
@post-stacked-effect: true;

.content-padding() when ( @body-background-color = @post-background-color ) and not (@post-stacked-effect = true){
    @content-padding: 0px;
}
.content-padding() when not (@body-background-color = @post-background-color), (@post-stacked-effect = true) {
    @content-padding: 20px;
}
body {
    .content-padding();
    content: "@{post-stacked-effect}";
    padding: @content-padding;
    background-color: @body-background-color;
    .post {
        background-color: @post-background-color;
    }
    .some-math {
            margin: -@content-padding -@content-padding @content-padding;
    }
}

@ content-padding始终为0px。你能帮我解决这个问题吗？

Answer 1

它是PHP Less Compiler中的一个错误。我必须做PHP解决方法。

当我为该编译准备变量时，我添加了在php中计算填充并将其注入LESS的函数。

它在PHP中只有一行。

$lessvars["content-padding"] = 
   ( $lessvars["body-background-color"] == $lessvars["post-background-color"] &&
   !filter_var($lessvars["post-stacked-effect"], FILTER_VALIDATE_BOOLEAN) )
   ? "0px" : "20px";

Answer 2

您正在使用'when'防护mixin创建一个新范围，该范围在外部不可见。

所以这甚至不应该起作用，当然也不是错误。

您可以改为创建一个函数并从'when'调用它。

@body-background-color: black;
@post-background-color: white;
@post-stacked-effect: true;

body {

    .padding(@padding)
    {
       padding: @padding;

       .some-math 
       {
          margin: @padding + 2em;
       }
    }


    & when ( @body-background-color = @post-background-color ) and not (@post-stacked-effect = true){
       .padding(0px); 
    }

    & when not (@body-background-color = @post-background-color), (@post-stacked-effect = true) {
       .padding(20px); 
    }
}

我删除了无关的css，并将其重命名，因为stackoverflow格式化了连字符函数名称。

在条件内设置变量

2 个答案: