A szelektorok összekapcsolása SASS-ban
Időnként szükségünk van arra, hogy a beágyazott konstrukciók fordításakor ne szóközzel kapcsolódjanak össze, hanem összefüggően. Ehhez a beágyazott szelektor neve elé egy és-jelet kell tenni:
div {
&.block {
width: 300px;
}
}
Ennek eredményeképpen a fordítás után a következő kódot kapjuk:
div.block {
width: 300px;
}
Mondd el, mi lesz a következő kód fordításának eredménye:
#block {
&.xxx {
width: 300px;
}
}
Mondd el, mi lesz a következő kód fordításának eredménye:
#block {
.xxx {
width: 300px;
}
}
Mondd el, mi lesz a következő kód fordításának eredménye:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Mondd el, mi lesz a következő kód fordításának eredménye:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Mondd el, mi lesz a következő kód fordításának eredménye:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
