css - 我可以在 LESS mixin 中使用 CSS 伪类数组吗？

Question

我开始在应用程序中使用 LESS 样式框架。我经常在应用程序中的某些地方需要将元素的伪类标准化为所有相同的样式。

而不是打字

按钮:悬停， 按钮:激活， 按钮:悬停:事件{ /*这里的样式*/ }

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

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

效果非常好，并输出带有附加伪类的按钮类。

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

Answer 1

您可以使用函数式混入:

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

然后按以下方式使用它:

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