A sassz fészkelés alapjai
Amikor először elkezdi használni a Sass-ot, az első dolog, amit találkozol, fészkel. Az egyik oka annak, hogy az előfeldolgozókat használjuk, mert segít csökkenteni a kód mennyiségét. Különösen a fészkelés lehetővé teszi rövidítések használatát szabályok írása során. Azonban az összes nagyszerű eszköz problémája, hogy könnyen visszaélhetnek. A fészkelés túlzott használata összetett, ellenőrizhetetlen stílusokhoz vezet.
Mi fészkelő
A Nesting lehetővé teszi a HTML struktúrát utánzó szelektort. Ez lehetővé teszi a rövidítések használatát stílusok írásakor. Például:
Ez a fészkelés legegyszerűbb példája, a div elem tartalmazza a p elemet. Az összeállított eredmény:
A div elemhez beállíthatjuk saját tulajdonságainkat:
Ez a példa két különböző szabályra van állítva: egy a div elemre, a másik a p.
Hogyan használjuk a fészket?
Az egymásba ágyazott stílusok használata meglehetősen egyszerű: csak egy szelektort (vagy szelektort) kell írni egy másik szelektor fogantyúi között.
A fészkelésnek annyi szintje van, amennyit csak akar. Ez azt jelenti, hogy elemet helyezhet el egy másik elem belsejébe, amely maga a harmadik elem közé tartozik.
A fészekszint korlátozása valóban nem. De ha valamit meg lehet tenni, ez nem jelenti azt, hogy meg kell csinálni. Jó gyakorlat, hogy ne maradjon több, mint három fészekelési szint. Nagyobb számú szint befolyásolja a kód olvashatóságát. A Sass arra lett tervezve, hogy segítsen nekünk gyorsabban írni a CSS-t, nem pedig egy csomó támogatott stílusra. Például:
A fészek öt szintje teljesen ártalmatlan. Tekintse meg az összeállított CSS-t, hogy jobban megértse a problémát:
Képzeld el, hogy megváltoztatjuk az oldal struktúráját, például a változást. Minden beágyazott stílust át kell írni, mivel mindegyikük a .content függvénye.
Ha a .text-ben stílusokat szeretnénk használni a webhelyen, akkor nem leszünk képesek, mert a .text szabályai az elemeket körülvevő elemektől függenek.
Referenciák a szülőválasztóra
A fenti szörnyű példában használtuk , amelyet ki kell cserélni a szülői szelektorral. A szimbólum. használták pseudo-osztályok létrehozására a linkekhez.
Önmagában könnyen olvasható és teljes mértékben támogatott. szimbólum Azt is használhatja, hogy összetett kijelölőket hozzon létre befejezéssel. Például:
Fészkelő tulajdonságok
A Sass lehetővé teszi a tulajdonságok gyors elérését is. Általában egy névtérből, például határtól származó tulajdonságok meghatározásához minden egyes elemet külön kell írni. A Sass-ban megadhatunk egy névteret, és befelé felsorolhatjuk a tulajdonságokat.
Ennek eredményeképpen minden névhez hozzáadták a névteret. A beágyazott tulajdonságok beágyazott szelektoraival ellentétben nem kell használni hogy helyettesítse a névtér értékét.
következtetés
Most, hogy megismerkedtél a fészkeléssel, kérjük, használja felelősségteljesen. A fészkelés segítségével nagyon egyszerű a stílusok átalakulása az olvashatóság rémálmává. Hol és hogyan használhatja a fészket attól függ, hogy Ön a 8 fészkelő szintet választja, kérem. De készen álljon a hosszú éjszakai munkaórákra, amikor újratervezi a projektet.
Talált hibát? Orphus: Ctrl + Enter