我的代码如下所示:
.my-func(@color) {
&:not(:hover) {
color: @color;
}
}
.class1, .class2 {
.subClass1 {
.my-func("#ffffff");
}
}
这将导致以下css:
.class1 .subClass1:not(:hover),
.class2 .subClass1:not(:hover) {
color: "#ffffff";
}
[我想做的是生成css,除了输出当前正在输出的内容外,还将允许我在函数输出的css部分之后添加更多选择器。
所以我想要看起来像这样的css(我添加了换行符):
.class1 .subClass1:not(:hover),
.class2 .subClass1:not(:hover),
.class1 .subClass1:not(:hover) p.some-other-class,
.class2 .subClass1:not(:hover) p.some-other-class,
.class1 .subClass1:not(:hover) p.yet-another-class,
.class2 .subClass1:not(:hover) p.yet-another-class {
color: "#ffffff";
}
所以可以使用较少的功能来完成此操作,以便我可以通过某种方式将两个元素选择器的列表传递给函数(p.some-other-class
和p.yet-another-class
),然后该函数将运行(给出前两行)输出),然后为传入的列表中的元素运行以将这些after函数输出追加到元素中?像在函数内传入的列表上运行.each
函数来完成此操作?
您可以尝试以下操作:
@class: some-other-class, yet-other-class;
.my-func(@color) {
&:not(:hover) {
color: @color;
}
each(@class, {
&:not(:hover) p.@{value} {
color: @color;
}
})
}
.class1, .class2 {
.subClass1 {
.my-func(#ffffff);
}
}
如果要将列表传递给功能,请进行如下调整:
.my-func(@color,@list) {
&:not(:hover) {
color: @color;
}
each(@list, {
&:not(:hover) p.@{value} {
color: @color;
}
})
}
@class: some-other-class, yet-other-class;
.class1, .class2 {
.subClass1 {
.my-func(#ffffff,@class);
}
}
具有以下选择器的更多通用名称:
.my-func(@color,@list) {
&:not(:hover) {
color: @color;
}
each(@list, {
&:not(:hover) @{value} {
color: @color;
}
})
}
@class: ~"p.some-other-class", ~"div.yet-other-class";
.class1, .class2 {
.subClass1 {
.my-func(#ffffff,@class);
}
}