Question

在我编译成main.less的{{1}}文件中说，我有以下内容：

main.css

显然，这已经变得笨拙，过度混乱了我的main.less文件并添加了可能导致多次不必要更改的重复副本。

我该如何改进？有没有办法可以做这样的事情：

.section1 {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
    {
        border: 1px solid green;
    }
}
.section2 {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
    {
        border: 1px solid red;
    }
}

由于

编辑1：根据@Alessandro Minoccheri的建议，我编译了但是得到的css如下：

.allCellTypes 
{
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
}
.section1 .allCellTypes 
{
    border: 1px solid green;
}
.section2 .allCellTypes 
{
    border: 1px solid red;
}

完全省略.section1 .allCellTypes { border: 1px solid green; } .section2 .allCellTypes { border: 1px solid red; }所涵盖的类的任何提及。也许这有两个原因？

将分组到.allCellTypes的类的定义在别处定义（在编译的引导程序文件中）。
我使用lessphp编译.allCellTypes文件，也许它有错误？

编辑2：我将以下代码放在lessphp page ...

.less

我得到了以下结果：

.cell1 {
  background-color: red;
}
.cell2 {
  background-color: green;
}
.cell3 {
  background-color: blue;
}
.allCellTypesClass {
  .cell1;
  .cell2;
  .cell3;
}
.section1 {
  .allCellTypes {
    .allCellTypesClass;
    border: 1px solid red;
  }
}

所以我害怕你的答案，@ Alessandro Minoccheri，没有做我想做的事！

Answer 1

我所做的主要内容如下：

我的Mixin：

.red-border () {
   border:@value @value @value;
}

申请：

.section-2 [class*="col-"] {
  .red-border;
}

如果您不想影响嵌套列，则：

.section-2 > [class*="col-"] {
  .red-border;
}

如果您只想要某个列断点：

.section-2 > [class*="col-sm-"] {
  .red-border;
}

如果你不想影响表格（没有测试过，但应该可以正常工作）。

.section-2 > [class*="col-"]:not(form) {
  .red-border;
}

Answer 2

以防万一，你可以这样得到它：

.section1 {
    .allCells; .allCellsProperties() {
        border: 1px solid green;
    }
}

.section2 {
    .allCells; .allCellsProperties() {
        border: 1px solid red;
    }
}

.allCells() {.col- {&xs-, &sm-, &md-, &lg- {
    &1, &2, &3, &4, &5, &6, &7, &8, &9, &10, &11, &12 {
        .allCellsProperties();
    }
}}}

但实际上，@ cab建议的基于属性选择器的解决方案更干净，更少膨胀。

Answer 3

您可以创建一个类.allCellTypes并添加您想要继承的所有类。您可以调用此类并添加其他属性你可以这样写：

.allCellTypesClass 
    {
    .col-xs-1; 
    .col-sm-1; 
    .col-md-1;
    .col-lg-1;
    .col-xs-2; 
    .col-sm-2; 
    .col-md-2;
    .col-lg-2;
    .col-xs-3; 
    .col-sm-3; 
    .col-md-3;
    .col-lg-3;
    .col-xs-4; 
    .col-sm-4; 
    .col-md-4; 
    .col-lg-4;
    .col-xs-5; 
    .col-sm-5; 
    .col-md-5; 
    .col-lg-5;
    .col-xs-6; 
    .col-sm-6; 
    .col-md-6; 
    .col-lg-6; 
    .col-xs-7; 
    .col-sm-7; 
    .col-md-7; 
    .col-lg-7;
    .col-xs-8; 
    .col-sm-8; 
    .col-md-8; 
    .col-lg-8;
    .col-xs-9; 
    .col-sm-9; 
    .col-md-9; 
    .col-lg-9;
    .col-xs-10; 
    .col-sm-10; 
    .col-md-10;
    .col-lg-10;
    .col-xs-11; 
    .col-sm-11; 
    .col-md-11; 
    .col-lg-11;
    .col-xs-12; 
    .col-sm-12; 
    .col-md-12; 
    .col-lg-12;
}

.section1
{
  .allCellTypes 
    {
       .allCellTypesClass;
       border: 1px solid green;
    }    
}
.section2 
{
    .allCellTypes 
    {
       .allCellTypesClass ;
       border: 1px solid red;
    } 
}

LessCss：嵌套选择器组

3 个答案: