Css 对于以括号开头的样式或仅使用属性选择器的样式，减少混合

如何将不以类或ID开头的样式混合到另一个样式中

[class*='col-'] {
 float: left;
 padding-right: 20px;
 @media @medium{
 padding-right: 0px;
 }
}

.col-2-3 {
 width: 66.66%;
 [class*='col-']  
} 

---

我认为您唯一的选择是将

[class*='col-]

选择器'用class'进行两次包装，以便将其混合在一起

.column {
  [class*='col-'] {
   float: left;
   padding-right: 20px;
   @media @medium{
     padding-right: 0px;
   }
  }
}

.col-2-3 {
 width: 66.66%;
 .column;
} 

---

即使在最新版本的编译器中，似乎也无法调用这样的mixin（只有属性选择器而没有前面的类或id选择器的mixin）。在中找到的以下语句似乎暗示只有那些具有类或id选择器的才被视为混合

您可以混合使用类选择器和id选择器，例如

因此，您最好使用

extend

函数，该函数似乎工作正常

下面是使用

extend

功能的较少代码

[class*='col-']{
浮动：左；
右边填充：20px；
@介质（最小宽度：20px）{
右边填充：0px；
}
}
.col-2-3{
宽度：66.66%；
&：扩展（[class*='col-']）；
}

编译时生成以下输出

[class*='col-']，
.col-2-3{
浮动：左；
右边填充：20px；
}
@介质（最小宽度：20px）{
[class*='col-']，
.col-2-3{
右边填充：0px；
}
}
.col-2-3{
宽度：66.66%；
}

使用

extend

也更有利，因为它将选择器分组并缩短代码

---

如果出于任何原因，您不希望使用

extend

功能，并且只限于mixin调用，那么唯一的选择就是将公共规则写入单独的mixin（如下面的代码片段）中，并在两个位置调用它

.common-props（）{
浮动：左；
右边填充：20px；
@介质（最小宽度：20px）{
右边填充：0px；
}
}
[类别*=“列-”]{
.common-props（）；
}
.col-2-3{
宽度：66.66%；
.common-props（）；
}

---

将常用道具放在带有括号的mixin中可以确保mixin本身不会在编译后的CSS中输出。

“在我看来，这是一个非常有效的功能请求。”-有一些，但没有，几乎没有被接受（有强烈的反对意见：1.语法不明确2.没有真正的需要（要继续使用现有的CSS规则集，必须使用

extend

）。就我个人而言，我甚至从未将“CSS规则集”命名为“混入”，并始终建议避免使用一个作为另一个（这只是一个有很多陷阱的遗留功能）.Hmm，如果已经有关于它的讨论，那么没有必要再提出另一个。我只是想，既然你可以调用其他选择器，那么你也应该能够调用它。我认为根本原因是什么构成了混入，什么只是CSS规则集，这是相当模糊的。要么只有带括号的规则集才应该是默认情况下，所有CSS规则集也应为mixin。仅使类和id选择器看起来像mixin并不容易理解。“要么只将带有括号的规则集视为mixin”-好的，是的，理想情况下，我希望在文档中反映这一点-事实上，今天引入mixin作为普通类和id规则集的文档是非常不幸的（从前面的步骤中推错了方向）。但这只是一个遗留文本-只是最终需要修改的文本之一（一些文档部分从最早的版本开始几乎没有变化）。但作为一项功能本身（“将类和id规则集用作混合项”）当然，它必须保持向后兼容性。是的，理解关于@seven-phases-max向后兼容性的那一点。你是正确的。我对它投了反对票，只是因为它产生了

。col-2-3[class*='col-']

选择器，这显然不是Q中的意思（也就是说，这段代码不会真正起作用）。