使用LESS参数混合作为选择器

时间:2018-07-10 13:58:11

标签: html css less mixins

我对LESS并不陌生,这是我第一次遇到此用例-因此我不确定该功能是否确实存在。

我有一些冗长的选择器(我正在使用生成的HTML)和一项功能(动画的底部边框),它需要定位一系列伪选择器。所有这些意味着我不得不多次键入选择器,我讨厌这些选择器,因此将它们全部放入一个变量中,然后可以像这样使用它:

代替:

long_selector1, long-selector2, long_selector3 {
    css: value;
}

我可以做到:

@selector_list: ~"long_selector1, long-selector2, long_selector3" ;

@{selector_list} {
    css: value;
}

但是,当我执行@{selector_list}:pseudo-selector时,pseudo-selector仅应用于变量内列表的末尾(基本上,应用于逗号分隔列表中的最后一个选择器)。最初,我希望LESS能够在解析变量中的String的同时检测逗号,并将伪选择器应用于所有选择器,但是a ...

所以我想知道是否有任何方法可以使用参数混合作为选择器。然后我可以这样声明:

.mixin1(@pseudo) {
    ~"long_selector1:@{pseudo}, long_selector2:@{pseudo}, long_selector3:@{pseudo}," 
}

...并像这样使用它:

.mixin1(:after) {
    css: value;
}

这就是我想要的,有什么办法吗?这是我的实际代码来说明上述解释。此刻,我刚刚加载了一些变量,并在中指定了伪选择器,这基本上击败了整个观点:

CodePen Example

0 个答案:

没有答案