Het combineren van selectors in SASS
Soms willen we dat geneste constructies bij compilatie niet met een spatie worden verbonden, maar aaneengesloten. Hiervoor moet je een ampersand plaatsen voor de naam van de geneste selector:
div {
&.block {
width: 300px;
}
}
Het resultaat na compilatie zal de volgende code zijn:
div.block {
width: 300px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
#block {
&.xxx {
width: 300px;
}
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
#block {
.xxx {
width: 300px;
}
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
