2

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

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

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

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

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

谢谢

编辑 1：根据@Alessandro Minoccheri 的建议，我编译但生成的 css 如下：

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

.allCellTypes将完全省略对将涵盖的类的任何提及。也许有两个原因？

  1. 将被分组的类.allCellTypes的定义在别处定义（在编译的引导文件中）。
  2. 我.less使用lessphp编译文件，也许它有一个错误？

编辑2：我在lessphp页面的演示窗口中放置了以下代码......

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

我得到了以下结果：

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

所以我担心你的回答，@Alessandro Minoccheri，没有做我想做的事！

4

3 回答 3

3

我所做的要点如下：

我的混音：

.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;
}
于 2013-12-27T18:49:03.773 回答
1

以防万一，您可以像这样在 LESS 中获取它：

.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 建议的基于属性选择器的解决方案更干净，更不臃肿。

于 2013-12-27T19:59:43.837 回答
0

您可以创建一个类.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;
    } 
}
于 2013-12-27T18:14:20.520 回答