css - Double ampersand in LESS -

i'm confused double ampersand behaviour in less compiler.

look:

.heading {     &&--type-small {         font-size: 15px;     } } 

will compiled to:

.heading.heading--type-small {       font-size: 15px; } 

and thats good.

but.

.wrapper {     .heading {         &&--type-small {             font-size: 15px;         }     } } 

will produce:

.wrapper .heading.wrapper .heading--type-small {     font-size: 15px; } 

it looks weird. no?

is there advice make code works like:

.wrapper .heading.heading--type-small {     font-size: 15px; } 

thanks =)

what happens when use ampersand in nested rule default nested structure gets ignored in output selector , ampersand acts a placeholder complete list of outer selectors , insert parent rules way top of hierarchy (the "path" nesting levels above) ... no way around that.

so using first 1 - & join (concatenate) nested selector whole list of outer selectors (appearing if added parent selector) , act combinator - see "nested rules" @ lescss.org. when use second ampersand - selector end including outer rules once again - .wrapper , rules in between added twice now. so, behavior not strange. see answer question: "how refer 2 previous elements / tags / classes less?" , more functionality of & see seven-phases-max's comments below. or find examples of & being used "path" placeholder under "advanced usage of &" @ lescss.org.

and concrete example:

i not sure why want repeat word "header" in class name .header--type-small, if using in addition class called .header ... use additional classes such .type-small, so:

.wrapper {     //style wrapper     .heading{         //general style heading         &.type-small {            //style heading class .type-small            font-size: 15px;         }         &.type-large {            //style heading class .type-large ... , on         }     } } 

with output css:

.wrapper .heading.type-small {   font-size: 15px; } 

but if really need whole long string repeated names particular reason ... this:

.wrapper {     //style wrapper     .heading {         //general style heading         &.heading--type{             &-small {                //style heading class .type-small                font-size: 15px;             }         }     } } 

with output css:

.wrapper .heading.heading--type-small {     font-size: 15px; }