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?
.allCellTypes
are defined elsewhere (within compiled bootstrap files). .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!
The gist of what I do is as follows:
My Mixin:
.red-border () {
border:@value @value @value;
}
Applying:
.section-2 [class*="col-"] {
.red-border;
}
If you don't want to affect nested columns, then:
.section-2 > [class*="col-"] {
.red-border;
}
If you only want a certain column breakpoint:
.section-2 > [class*="col-sm-"] {
.red-border;
}
If you don't want to affect forms (haven't tested this but should work fine).
.section-2 > [class*="col-"]:not(form) {
.red-border;
}