0

LESS のネストをオーバーライドしてスコープ内にとどめることができるかどうか疑問に思っていました-単純だからです... :-)

クラスに応じて 2 つの状態を持つ要素がある場合、body2 つの CSS オブジェクトを定義する必要があります。モジュールごとに 1 つだけにしたいと思います。

.module {
    h1 {
        float: left;
    }
}

body.secondary {
    .module {
        h1 {
            float: right;
        }
    }
}

で親を定義するときのように、&その親を上書きする方法はありますか?? したがって、次のようになります。

.module {
    h1 {
        float: left;
    }

    &=body.secondary {
        h1 {
            float: right;
        }
    }
}

&が別のセレクターとして定義されている場所...

これは素晴らしいことで、モジュールごとに 1 つの CSS オブジェクトという点で私の CSS をよりシンプルにします。

ありがとう... ：-）

4

1 に答える 1

1

この回答とこの回答の両方で、これについていくつかの広範な解説を行いました。あなたの特定のケースでは、これは次のようになります。

以下

.module {
    h1 {
        float: left;
       body.secondary & {
          float: right;
       }  
    }
}

CSS出力

.module h1 {
  float: left;
}
body.secondary .module h1 {
  float: right;
}

重要なのは&、 が html 構造の「親」自体をターゲットにするためだけではなく、ネストされた構造全体の文字列置換であることを理解することです。したがって、上記の私のソリューションでは、ネストされた LESS の「親」は、その中にネストされた構造のポイントで.module h1置き換えられる文字列です。&body.secondary &

于 2013-02-21T14:43:45.287 に答える