css - 我可以在 LESS 混合中使用一组 CSS 伪类吗？

Question

我开始在应用程序中使用 LESS 框架来处理样式。我经常在应用程序中有一些地方需要标准化伪类以使元素都具有相同的样式。

而不是打字

button:hover, button:active, button:hover:active { /*styles here */ }

我正在使用 LESS 的嵌套样式来附加这些伪类，如下所示：

.button {
 {
    &,
    &:hover,
    &:active,
    &:hover:active {
            border: 2px solid #000000
    }
}

这工作得很好，并输出带有附加伪类的按钮类。

我的问题是：我可以更进一步将伪调用添加到 mixin 中并因此调用 mixin 吗？我知道这可能看起来像是过度设计，但我在多个样式表中重复使用了很多，如果能够混合使用一行代码，那就太好了。

score 2 · Accepted Answer

您可以使用功能混合：

.button(@_arg) {
    &,
    &:hover,
    &:active,
    &:hover:active {
            border: @_arg;
    }
}

然后按照以下方式使用它：

.example {
    .button(2px solid #000);
}

1 回答 1