CSS选择器包装/分组？ [复制]答案

【问题标题】：css selector wrapping / grouping? [duplicate]CSS选择器包装/分组？ [复制]
【发布时间】：2017-12-15 20:30:32
【问题描述】：

有没有办法像这样对多个选择器进行分组：

[data-my-attribute]{

.prop1{}
.prop2{}
.prop3{}

}

@media 是一种分组。但我希望它只适用于某些特定的孩子。我对 .class1、.class2、.class3{} 语法不感兴趣

有什么方法可以将@media 和 [data-] 结合起来吗？

问题是，在这种情况下，我无法控制 .prop1,2,3.. 因为它们来自其他人。我需要一种方法来将它们分组。

我尝试了几次谷歌搜索，但都没有成功。

可以吗？ :)

【问题讨论】：

【解决方案1】：

不使用 CSS。

不过，您可以使用 SASS 或 LESS 以这种方式组织您的样式，但您需要使用编译器从这些文件中生成实际的 CSS。

例如，使用 SASS，您可以执行以下操作：

[data-my-attribute] {
  .prop1{
    color: blue;
  }
  .prop2{
    color: red;
  }
  .prop3{
    color: green;
  }
}

编译为：

[data-my-attribute] .prop1 {
  color: blue;
}  

[data-my-attribute] .prop2 {
  color: red;
}

[data-my-attribute] .prop3 {
  color: green;
}

【讨论】：