Question

鉴于下面的CSS选择器的混合列表，除了删除逗号和括号之外，还有什么可以使它更紧凑吗？我并不是要求绝对最小的代码，只是在使用Stylus时才有意义。

.cl_nw,
.cl_n,
.cl_ne,
.selected .color_fg1,
.selected .color_fg2,
.selected .color_fg3,
.alert_nw,
.alert_n,
.alert_ne,
ul.checklists li.list_item span.tasks span.progress b,
.menuPopupList li.selected,
.menuPopupList li.selected a,
.menuPopupList li.selected a:visited,
.suggestionBox li.selected,
a.undo {
  background-color: #eb6d20;
}

Answer 1

我不习惯stylus预处理事情，但是阅读他们的文档，他们在变量上使用多个选择器并使用字符串插值：

selectorsList = '.cl_nw, .cl_n, .cl_ne, .selected .color_fg1 '

{selectorsList}
     color: red

后来编译到这个：

.cl_nw,
.cl_n,
.cl_ne,
.selected .color_fg1 {
    color: #000;
}

需要注意的是，必须在此方法中使用逗号，否则编译器将假定您使用的是层次结构选择器

这当然不会在您评论时使用一些高级技术完全压缩您的代码，但在我的个人意见中，可以帮助您轻松维护代码和明确的愿景正在应用于选择者

Try it online

请参阅完整的文档here

使用Stylus的紧凑型多重选择器？

1 个答案: