LessCss - 匹配选择器的正确语法

Question

我有以下代码，我将 main 用作扩展函数

.clear-left
{
    > li:first-child {
        border-left:none;
        margin-left:0;
        padding-left:0;
    }
}

#footer ul
{
    &:extend(.clear-left);
}

我一直在研究如何让它更健壮——就像你在 CSS 中所做的那样。

在我的 CSS 看来，更强大的选择器是：

ul.clear-left

或多用少

.inline-list.clear-left

    .inline-list
    {
        > li {
            float:left;
        }

        &:extend(.clearfix all);

    }

但是，选择器编译为：

ul#footer ul > li {
   // code here
}

我所描述的是可以实现的吗？

Answer 1

在需要类似属性设置的地方扩展名为 .clear-left 的公共代码块，并在扩展时将 .clear-left 附加到选择器（以使其更具体或更健壮），您可以使用以下任一选项（第一个是首选，最后一个是最少的）。

选项 1: 只需在扩展时将所需的 class 附加到父选择器即可。这里不需要对公共功能进行额外的更改。这是最简单的解决方案，也是我个人推荐的解决方案。

.clear-left {
    > li:first-child {
        border-left:none;
        margin-left:0;
        padding-left:0;
    }
}
#footer ul {
    &.clear-left:extend(.clear-left all){}; /* appended class while extending */
}

选项 2: 与上面相同，但不是将其作为带括号的混合，而是将其包装为包装选择器的一部分，如下所示。在这里，由于它不完全是用作函数的混入，因此可以对其进行扩展，并将选择器分组以避免重复。这种方法优于下一种方法，但它会在输出中产生一个额外的选择器行。

.some-wrapper{
    &.clear-left{
       > li:first-child {
            border-left:none;
            margin-left:0;
            padding-left:0;
        }
    }
}
#footer ul:extend(.some-wrapper all){}; /* extend attached to the selector */

#header ul:extend(.some-wrapper all){};

编译输出：

.some-wrapper.clear-left > li:first-child, /* this is the extra selector */
#footer ul.clear-left > li:first-child,
#header ul.clear-left > li:first-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

选项 3： 将整个公共函数放在一个包装器 mixin 中，以父选择器 (&) 为前缀，并在需要时调用它。由于 .clear-left 附加到父选择器，因此在输出中它将始终附加到调用它的根父选择器（如本例中的 .inline-list.clear-left ）。这种方法的缺点是 mixin 可以是 invoked/called 但不能扩展（意味着选择器不会被分组并且属性会一次又一次地重复）。

.some-wrapper() {
    &.clear-left{ /* note the use of parent selector (&) */
       > li:first-child {
            border-left:none;
            margin-left:0;
            padding-left:0;
        }
    }
}

.inline-list {
    > li {
        float:left;
    }
    .some-wrapper; /* invoke the mixin */
}

LessCss - 匹配选择器的正确语法

LessCss - correct syntax for matching selector

css

less