CSS中将多个具有相同属性选择器的选择器组合成一个选择器

Question

是否可以在 CSS/SASS/LESS 中将具有相同属性的多个选择器组合成一个选择器而不重复该属性？

例如：

div.foo[data="123"] {
  color: red;
}

p.bar[data="123"] {
  color: red;
}

p.bar[data="123"], div.foo[data="123"]{
  color: red;
}

以某种方式组合它们？比如这个无效的场景：

(div.foo, p.bar)[data = "123"] {
  color: red;
}

Answer 1

你可以这样做：

div.foo,
p.bar {
    &[data="123"] {
        color: red;
    } 
}

• 第一步：
  组合你的主要选择器
• 第二步：
  添加数据选择器