Combining Selectors in LESS
Sometimes we need nested constructs to be connected together when compiling, not separated by a space. To do this, we need to put an ampersand before the name of the nested selector:
div {
&.block {
width: 300px;
}
}
As a result, after compilation we will get the following code:
div.block {
width: 300px;
}
Tell me what the result of compiling the following code will be:
#block {
&.xxx {
width: 300px;
}
}
Tell me what the result of compiling the following code will be:
#block {
.xxx {
width: 300px;
}
}
Tell me what the result of compiling the following code will be:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Tell me what the result of compiling the following code will be:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Tell me what the result of compiling the following code will be:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
