Spájanie selektorov v SASS
Niekedy potrebujeme, aby sa pri kompilácii vnorených konštrukcií spájali nie medzerou, ale spojito. Na to je potrebné pred názov vnoreného selektora umiestniť ampersand:
div {
&.block {
width: 300px;
}
}
V dôsledku po kompilácii dostaneme nasledujúci kód:
div.block {
width: 300px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
#block {
&.xxx {
width: 300px;
}
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
#block {
.xxx {
width: 300px;
}
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
