Question

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

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

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

Answer 1

即使在最新版本的编译器中，似乎也无法调用这样的mixin（只有一个没有前面的类或id选择器的属性选择器）。 Less website中的以下语句似乎暗示只有那些具有class或id选择器的语句被认为是mixins。

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

所以，你最好的选择是使用似乎工作正常的extend函数。

以下使用extend功能的Less代码

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

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

在编译时产生以下输出。

[class*='col-'],
.col-2-3 {
  float: left;
  padding-right: 20px;
}
@media (min-width: 20px) {
  [class*='col-'],
  .col-2-3 {
    padding-right: 0px;
  }
}
.col-2-3 {
  width: 66.66%;
}

使用extend也更有利，因为它可以对选择器进行分组并缩短代码。

如果由于某种原因您不希望使用extend功能并将自己仅限于混音调用，则唯一的选择是将常用规则写入单独的mixin（如下面的代码段）并在两个地方打电话。

.common-props(){
  float: left;
  padding-right: 20px;
  @media (min-width: 20px){
    padding-right: 0px;
  }
}
[class*='col-'] {
  .common-props();
}

.col-2-3 {
  width: 66.66%;
  .common-props();
}

将公共道具放在带括号的mixin中将确保mixin本身不会在编译的CSS中输出。

Answer 2

我认为你唯一的选择就是将[class*='col-]选择器'用一个'包裹'，以便它可以混合使用。

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

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

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

2 个答案: