LESS: How to completely expand two classes when there is a relationship between the two of them

Question

I will explain an example.

Submit the following CSS rules

.parent { color: blue; } .child { color: red; } .parent .child { color: white; } 

Now imagine that you want to create a class equivalent to .parent and another equivalent to .child using LESS.

If you use lengthening, you achieve part of the goal:

 .newParent { &:extend(.parent all); } .newChild { &:extend(.child all); } 

Will display:

 .parent, .newParent { color: blue; } .child, .newChild { color: red; } .parent .child, .newParent .child, .parent .newChild { color: white; } 

Which makes your new classes almost equivalent to the old classes.

Missing .newParent .newClass from last rule set.

Is there any way to achieve this complete equivalence?

Note This can be useful for those who use Bootstrap and who want to use other names for their classes (in order to achieve more abstraction from the framework). For example, imagine that you want to change the name for .input-append and .add-on , for which you will need to expand all selectors related to both classes, including those in which they are displayed (for example, .input-append .add-on { ... } ).

Thanks in advance!

Answer 1

The all option will add a new selector to all hierarchical relationships / nested selectors that already exist .

So, in the .parent .child nested selector, when extending .parent with .newParent it will extend the nested selector with .newParent .child because this relationship with .child defined. When extending .child with .newChild nested selector expands to .parent .newChild , as there is a relationship between .child and .parent . And you get this CSS :

 .parent .child, .newParent .child, .parent .newChild { color: white; } 

Note. This does not create selectors based on nested selectors created with the extension. Before the extension, there is no .newParent .child , not one of the .parent .newChild , which can lead to the creation of .newParent .newChild after the rule extension.

I'm not quite sure how accurately you want your CSS output to look, but you can always expand the "relationship" / combined / nested selector and avoid the all option so that you don't generate all hybrid selectors (like .parent .newChild and .newParent child ):

 .newParent { &:extend(.parent); } .newChild { &:extend(.child); } .newParent .newChild { &:extend(.parent .child); } 

or nested form:

 .newChild { &:extend(.child); } .newParent { &:extend(.parent); .newChild { &:extend(.parent .child); } } 

and CSS output:

 .parent, .newParent { color: blue; } .child, .newChild { color: red; } .parent .child, .newParent .newChild { color: white; } 

If you wish, you can simply add all the nested combinations of selectors by adding the all parameter. This will give you all the permutations of the selectors and copy this CSS :

 .parent, .newParent { color: blue; } .child, .newChild { color: red; } .parent .child, .parent .newChild, .newParent .child, .newParent .newChild { color: white; }