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：只需在扩展时将所需的类附加到父选择器即可。此处不需要对常用功能进行其他更改。这是最简单的解决方案，也是我个人推荐的解决方案。

.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，而是将其作为包装选择器的一部分包装，如下所示。这里因为它不完全是用作函数的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-left）。这种方法的缺点是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 */
}

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

1 个答案: