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

Question

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

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

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

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

在我的 CSS View 中，更强大的选择器是:

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 的公共(public)代码块，并在扩展时将 .clear-left 附加到选择器(使其成为更具体或更稳健)，您可以使用以下任一选项(第一个是首选，最后一个是最少)。

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

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

.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-左边 为这个例子)。这种方法的缺点是可以调用/调用 mixins 但不能扩展(这意味着选择器不会被分组并且属性会一次又一次地重复)。

.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 */
}