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 上的“嵌套规则” . 但是当您使用第二个＆符号时 - 您的选择器最终将再次包含所有外部规则 -.wrapper现在将添加两次之间的所有规则。所以，这种行为并不奇怪。另请参阅我对这个问题的回答：“如何使用 LESS 引用两个先前的元素/标签/类？” 对于更多功能，&另请参阅下面的 7-phases-max 评论。或者在下面找到一些&用作“路径”占位符的示例lescss.org上的“& 的高级用法” 。

对于您的具体示例：

我不完全确定你为什么要在类名中重复“header”这个词.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 回答