5

私は次の少ないです：

.container {
    .column, .columns {
        .one& {
            width: 40px;
        }
    }
}

コンパイルすると、CSSで次のようになります。

.one.container .column,
.one.container .columns {
    width: 40px;
}

しかし、私は得ることを期待していました：

.container .one.column,
.container .one.columns {
    width: 40px;
}

LESSの親演算子（&）は、実際には私が祖父母になると期待しているものを参照しているようです。私は物事を適切にネストしていますか？ドキュメントには、複数のレベルの深さをネストする例は示されていません。ネスティングで希望の出力を達成できますか？

npm経由でインストールされたlessc1.3.3を使用しています。

4

1 に答える 1

5

&「親」コンビネータではなく、「親」コンビネータとして考えることが重要です。つまり、ネストされたセレクターの文字列全体をその時点まで（レベルの深さに関係なく）取得し、文字列置換ホルダーと同等の機能を果たします。だからあなたの例の縮小版で...

.container {
    .column {
        .one& {
            width: 40px;
        }
    }
}

...そのレベルのセレクター文字列はです.container .column。これは、の位置で「置き換えられる」ものであるため、上記のように先頭&に連結すると、セレクター文字列全体の先頭にアタッチされ、最終的に次のようになります。

.one.container .column {width 40px;}

しかし、最後から連結する場合（との間にスペースはありません&）.、...

.container {
    .column {
        &.one {
            width: 40px;
        }
    }
}

...になる：

.container .column.one {width 40px;}

この最後のものは本当にあなたが望むクラスの組み合わせですが、あなたが望んでいたのとまったく同じ順序ではありません。ただし、順序はブラウザにとって重要ではない.one.columnか.column.one、同じです。つまり、次のように、両方の個別のクラスが適用されている要素を意味します。

<div class="column one"></div>
<div class="one column"></div>

これらは両方とも同等であり、両方の要素が両方のクラスを持っているため、.one.columnまたはセレクターとして両方の要素を選択します。.column.one

順序が絶対に不可欠である場合（生成されたCSSを探しているとおりにする必要があります）、次のように少し繰り返す必要があります。

.container {
    .column {
       ...generic column code here...
    }
    .one {
        &.column {
            width: 40px;
            ...any other code dependent on combination of .one.column here...
        }
    }
}
于 2013-01-23T10:01:51.263 に答える