LessCss:嵌套选择器组

时间:2013-12-27 18:09:14

标签: css-selectors less twitter-bootstrap-3 nested lessphp

在我编译成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; } 所涵盖的类的任何提及。也许这有两个原因?

  1. 将分组到.allCellTypes的类的定义在别处定义(在编译的引导程序文件中)。
  2. 我使用lessphp编译.allCellTypes文件,也许它有错误?
  3. 编辑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,没有做我想做的事!

3 个答案:

答案 0 :(得分:3)

我所做的主要内容如下:

我的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;
}

答案 1 :(得分:1)

以防万一,你可以这样得到它:

.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建议的基于属性选择器的解决方案更干净,更少膨胀。

答案 2 :(得分: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;
    } 
}