Selektorite ühendamine SASS-is
Mõnikord vajame, et pesastatud konstruktsioonide kompileerimisel ühendataks need mitte tühikuga, vaid kokku liidetult. Selleks tuleb pesastatud selektori nime ette panna ampersand:
div {
&.block {
width: 300px;
}
}
Tulemusena saame pärast kompileerimist järgmise koodi:
div.block {
width: 300px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
#block {
&.xxx {
width: 300px;
}
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
#block {
.xxx {
width: 300px;
}
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
