Css 双安培数

我对LESS编译器中的双安培和行为感到困惑

看：

将汇编为：

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

这很好

但是

将产生：

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

看起来很奇怪。没有

是否有任何建议可以使此代码像这样工作：

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

---

Thank=）

当您在嵌套规则中使用符号and时，默认的嵌套结构在输出选择器中被忽略，而符号and充当外部选择器完整列表的占位符，只需将所有父规则插入到层次结构的顶部（“路径”）对于以上所有嵌套级别）。。。没办法

因此，使用第一个-

&

只需将嵌套选择器连接（连接）到整个外部选择器列表中（看起来好像它刚刚将其添加到父选择器中），并充当组合器-请参见lescss.org。但是，当您使用第二个符号时，选择器将再次包含所有外部规则，

.wrapper

和介于两者之间的所有规则将被添加两次。所以，这种行为并不奇怪。另请参见我对这个问题的回答：“？”，有关

和
的更多功能，请参见下面七个阶段max的评论。或者在lescss.org下找到一些将
&
用作“路径”占位符的示例

并以您的具体例子：

我不完全清楚为什么要在类名
.header中重复单词“header”——如果您在名为
.header
的类之外使用small
。。。我只会使用附加类，例如
。键入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 .heading.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.type-small {
  font-size: 15px;
}

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

好的，没有办法只插入外部选择器的一部分。什么时候将
&&
功能添加到LESS，它在哪里记录？我没听说过这个。@ZZZBOV不是嵌套规则名称中的第一个字符的符号AND（以及第二个符号AND）基本上是整个嵌套规则路径的占位符-有关详细信息，请参阅我的答案。我相信它是和其他一些安培表功能一起引入的。在@MartinTurjak下记录，我对
&
有新的东西感到困惑，我知道如何使用
&
，并且没有联系到它复制了选择器。@zzzzBov是的，事实上-在
&
中，两者有两个不同的功能。。。第一个是“连接”的，第二个是“路径”的占位符（我同意这会让它更加混乱，因为这里它被插入到选择器的其余部分之前=）。我现在把这句话说得很好，不得不把它加到我的回答中；-）“这两个&只是有非常不同的功能”——这并不完全正确，事实上，无论你使用多少次，符号都是以相同的方式展开的。符号and总是指“外部选择器的完整列表”，而不是“仅指最近的父选择器”（请参阅）。尝试以下示例进入扩展机制：1
a{b{c&{-:-}}}
2
a，b{c，d{&+&{-:-}}
典型的混淆点通常是：“使用
&
也会取消所有外部选择器的默认前置，这并不明显”，对于basic
a{b{&c{-:-}}
案例看起来，
&
只是最近的父母的同义词，但事实并非如此。我恐怕我们不得不说1）和2）（以及“使用&-）@seven Phase max您是对的……我绝对不想添加任何额外的混淆……所以我现在尝试以不同的方式简化答案（但它仍然适用于更复杂的情况，没有太多细节）。我现在明确地补充说，它永远不会只适用于父选择器。你现在怎么看？@seven Phase max不，我不会：P，但谢谢，现在它的清晰=）