5

LESS コンパイラでの二重アンパサンドの動作について混乱しています。

見て：

.heading {
    &&--type-small {
        font-size: 15px;
    }
}

次のようにコンパイルされます。

.heading.heading--type-small {
      font-size: 15px;
}

そして、それは良いことです。

しかし。

.wrapper {
    .heading {
        &&--type-small {
            font-size: 15px;
        }
    }
}

生産します:

.wrapper .heading.wrapper .heading--type-small {
    font-size: 15px;
}

奇妙に見えます。いいえ？

このコードを次のように機能させるためのアドバイスはありますか:

.wrapper .heading.heading--type-small {
    font-size: 15px;
}

ありがとう =)

4

1 に答える 1

8

ネストされたルールでアンパサンドを使用すると、デフォルトのネストされた構造が出力セレクターで無視され、アンパサンドが外部セレクターの完全なリストのプレースホルダーとして機能し、すべての親ルールを階層の最上位 (上位のすべてのネスト レベルの「パス」) ... それを回避する方法はありません。

したがって、最初のものを使用する&と、ネストされたセレクターが外部セレクターのリスト全体に結合 (連結) され (親セレクターに追加されたかのように表示されます)、コンビネーターとして機能します - lescss.orgの「ネストされたルール」を参照してください。 . しかし、2 番目のアンパサンドを使用すると、セレクターはすべての外側のルールを再び含める.wrapperことになり、その間のすべてのルールが 2 回追加されます。したがって、動作はそれほど奇妙ではありません。この質問に対する私の回答も参照してください。 「以前の 2 つの要素 / タグ / クラスを LESS で参照するにはどうすればよいですか? その他の機能については、&以下の Seven-phases-max のコメントも参照してください。&または、以下の「パス」プレースホルダーとして使用されている例をいくつか見つけてくださいlescss.orgの「& の高度な使用法」 。

そしてあなたの具体的な例に：

.header--type-smallというクラスに加えてそれを使用している場合、クラス名で「ヘッダー」という単語を繰り返したい理由が完全にはわかりません.header...次.type-smallのような追加のクラスを使用するだけです：

.wrapper {
    //style for the wrapper
    .heading{
        //general style for the heading
        &.type-small {
           //style for the heading with class .type-small
           font-size: 15px;
        }
        &.type-large {
           //style for the heading with class .type-large ... and so on
        }
    }
}

出力 CSS を使用:

.wrapper .heading.type-small {
  font-size: 15px;
}

しかし、特定の理由で名前が繰り返される長い文字列全体が本当に必要な場合は、次のようにすることができます。

.wrapper {
    //style for the wrapper
    .heading {
        //general style for the heading
        &.heading--type{
            &-small {
               //style for the heading with class .type-small
               font-size: 15px;
            }
        }
    }
}

出力 CSS を使用:

.wrapper .heading.heading--type-small {
    font-size: 15px;
}
于 2013-10-07T16:02:12.990 に答える