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 Compiler のバグです。PHPの回避策を実行する必要があります。

そのコンパイル用の変数を準備しているときに、php でパディングを計算してそれを LESS に挿入する関数を追加しました。

PHP では 1 行しかありません。

$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 を使用して新しいスコープを作成しています。

したがって、これは動作するはずもなく、バグでもありません。

代わりに、関数を作成して「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 がハイフンでつながれた関数名を奇妙にフォーマットするためです。

于 2014-05-13T04:48:17.093 に答える