Sukrams Sukrams - 15 days ago 5
CSS Question

Manage nesting in LESS

I want to get something like

.classA, .classB, .classC, .classD, .classE {
color: white;
}

.classA .classI, .classB .classI, classC .classI {
background: red;
}


is this possible with something like

.classA, .classB, .classC {
color: white;
.classI {
background: red;
}
}


class D and E shouldn't geht the class I.

hopefully you know, what I mean

Answer

For your case you shouldn't use .classD and .classE at the top level because the nested selector doesn't apply to all of them.

You should just use .classA, .classB, .classC and then use :extend for the other two.

.classA, .classB, .classC {
  color: white;
  .classI {
    background: red;  
  }
}
.classD, .classE {
  &:extend(.classA);
}

When compiled it would result in the following CSS:

.classA, .classB, .classC, .classD, .classE {
  color: white;
}
.classA .classI, .classB .classI, .classC .classI {
  background: red;
}
Comments