css - 以括号开头或仅使用属性选择器的样式较少混合

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 网站中找到的以下声明似乎暗示只有那些具有类或 id 选择器的才被视为混合。

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

因此，您最好的选择是使用extend似乎可以正常工作的功能。

下面使用该extend功能的较少代码

[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 调用，那么唯一的选择是将通用规则写入一个单独的 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();
}

将 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;
}