Question

我将举例说明我想做的事情。

:all() {
    &, 
    &:link,
    &:visited,
    &:active,
    &:focus
}

以上是对“自定义选择器”的想象。它本身返回一个锚标记的所有伪类的选择，减去：悬停。

我想将它用作选择器，如下所示：

.menu {
    a.top-level:all, span {
        color: @dormant-grey;
    }
    a.top-level:hover {
        color: @off-black;
    }
}

并为它生成：

.menu a.top-level,
.menu a.top-level:link,
.menu a.top-level:visited,
.menu a.top-level:active,
.menu a.top-level:focus,
.menu span {
    color: #686868;
}
.menu a.top-level:hover {
    color: #22282a;
}

所以我希望我能清楚地传达问题所在。有没有办法重用选择？

请注意，这与将样式传递到mixin不同。将样式传递到mixin中以实现相同的功能，需要重复样式。一旦进入mixin，然后再次进行mixin无法处理的所有其他选择。它也是我现在正在做的事情，我发现它不值得使用mixin，因为我已经多次重复自己以至于我只是去拉出来。

所以我希望这很清楚。我问是否有办法重复使用选择，而不是样式。如果不能做到这一点，是否有可以使用的语言？

Answer 1

（所以不要留下这个没有答案 - 复制我上面的评论）：

.all(@-) {
    &,
    &:link,
    &:visited,
    &:active,
    &:focus {
        @-();
    }
}

.menu {
    .span {
        color: red;
    }
    a.top-level {
        .all({.span});
        :hover {
            color: blue;
        }
    }
}

这显然会为.span和a.top-level系列产生重复的样式，但只要您关心并生成缩小的CSS版本--clean-css --clean-option=--advanced选项就会消除重复的样式。

有没有办法在LESS中编写自定义选择器？

1 个答案: