0

我需要根据条件在 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。你能帮我解决这个问题吗？

4

2 回答 2

1

它是 PHP Less 编译器中的一个错误。我必须做 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";
于 2013-06-26T17:33:38.587 回答
-1

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

所以这甚至不应该工作，当然也不是一个错误。

您可以改为创建一个函数并从“何时”调用它。

@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 奇怪地格式化了连字符的函数名称。

于 2014-05-13T04:48:17.093 回答