SASS-i pesastatud seostel põhinevad valijad
Vaatame, kuidas SASS-is pesastamise ajal lisada erinevaid valijaid, mis valivad elemente suguluse alusel. Vaadake näiteid.
Näide
Tütarelementide valija:
div {
> p {
color: red;
}
}
Kompileerimise tulemus:
div > p {
color: red;
}
Näide
Kõrvaloleva elemendi valija
div {
+ p {
color: red;
}
}
Kompileerimise tulemus:
div + p {
color: red;
}
Näide
Laiem sugulaselementide valija:
div {
~ p {
color: red;
}
}
Kompileerimise tulemus:
div ~ p {
color: red;
}
Praktilised ülesanded
Kirjeldage, milline on järgmise koodi kompileerimise tulemus:
ul {
color: red;
> li {
padding: 20px;
}
}
Kirjeldage, milline on järgmise koodi kompileerimise tulemus:
div {
ul {
> li {
padding: 20px;
}
}
}
