Question

我对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;
}

谢谢=）

Answer 1

在嵌套规则中使用＆符号时会发生什么情况，在输出选择器中忽略默认嵌套结构，而＆符号用作外部选择器完整列表的占位符，并且只是将所有父规则一直插入到层次结构的顶部（上面所有嵌套级别的“路径”）......无处可去。

所以使用第一个 - &只会将嵌套选择器连接（连接）到外部选择器的整个列表（看起来好像只是将它添加到父选择器中）并充当组合子 - 请参阅"Nested rules"在lescss.org。但是当你使用第二个＆符号时 - 你的选择器最终会再次包含所有外部规则 - .wrapper和它们之间的所有规则现在将被添加两次。所以，这种行为并不奇怪。另请参阅我对此问题的回答：“How to refer to two previous elements / tags / classes with LESS？”以及&的更多功能，另请参阅下面的七阶段最大评论。或者在lescss.org的"Advanced Usage of &"下找到&被用作“路径”占位符的一些示例。

以您的具体示例：

我不完全确定为什么你要在类名.header--type-small中重复“header”这个词，如果你在名为.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;
}

LESS中的双＆符号

1 个答案: