css-selectors - LessCss: nesting groups of selectors

Question

Say in my main.less file which gets compiled into main.css, I have the following:

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

Clearly this is already becoming unwieldy, excessively cluttering my main.less file and adding duplication of sorts which could cause multiple unnecessary changes.

How can I improve this? Is there a way I could for example do something like this:

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

Thanks

Edit 1: As per @Alessandro Minoccheri's suggestion, I compiled but the resulting css was as follows:

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

Any mention of the classes that would be covered by .allCellTypes are completely omitted. Perhaps there are two reasons for this?

The definitions for the classes which would be grouped into .allCellTypes are defined elsewhere (within compiled bootstrap files).
I compile the .less files using lessphp, perhaps it has a bug?

Edit 2: I placed the following code in the demo window on the lessphp page...

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

and I got the following result:

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

So I'm afraid your answer, @Alessandro Minoccheri, is not doing what I wanted!

score 3 · Accepted Answer

私がやっていることの要点は次のとおりです。

私のミックスイン:

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

score 0 · Accepted Answer

クラスを作成し、.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;
    } 
}

css-selectors - LessCss: nesting groups of selectors

3 に答える 3

Related

Reference