Css Változó Leírás és Használati példák
Hello barátok, Shevchenko Vyacheslav kapcsán, és ma már nem egy nagy, de érdekes hozzászólás. Találkoztál már valaha a projekt elterjedésének problémájával és a css kód megszervezésével? Úgy gondolom, a válasz egyértelmű YES, ha nem, akkor minden előtted van.
Amikor egy projekt elkezd növekedni, a CSS rendszerint nehézkes lesz és erősen fenntartható. A probléma megoldásához a CSS fejlesztői bevezetett változókat, azokat már népszerű böngészők támogatják. Ez megkönnyíti a stílusok ismétlését.
A tudósok és a tapasztalt tervezők kifogásolhatják és mondhatják: "A változók már régóta vannak SASS és LESS!" -ben. Igen, nem vitatkozom, de előprocesszorok, és használat előtt össze kell állítani őket, és a natív CSS-változók a böngészőben jól működnek! Nem jó?
A fájlban lévő változók ugyanazt a hatókört alkalmazzák, mint a CSS egyéb szabályai. Természetesen a legkényelmesebb, ha globálisak. Ehhez be kell jelentened őket az ál-osztályban: root.
Egy kicsit a támogatásról
Most a változók a Firefox és a Chrome legújabb verziójában működnek. Itt megtalálhatja a legfrissebb támogatási információkat.
Az alábbiakban néhány példát mutatunk be, amelyek jól mutatják a CSS-változók tipikus eseteit. Ha a példák nem működnek, győződjön meg arról, hogy a böngésző legújabb verziója van.
A bőr színei
A változók nagyon hasznosak, ha a tulajdonságokat többször kell használni. Jó példa erre a terv színsémája. Ahelyett, hogy a színt a szabálytól a szabályig átmásolnánk, egyszerűen beilleszthetjük egy változóba, és onnan leválhatjuk.
És ha valamilyen oknál fogva módosítania kell a téma színét, vagy létre kell hoznia egy új bőrt, akkor csak egy helyen változtathatja meg a színt, de a változások hatással lesznek a webhely összes oldalára.
Barátságos tulajdonnevek
A változók használatának második kényelmes módja az, hogy létrehozzunk néhány előre beállított beállítást, ha nem akarunk hosszú tulajdonságértéket megemlékezni, például a transzformációra. box-shadow és betűtípus.
Ha egy tulajdonság értékét egy változóba helyezzük, nevezzük barátnevekkel.
A változók dinamikusan változó értékei
Az alábbi példa bemutatja, hogy milyen egyszerű a tulajdonságok dinamikus manipulálása. miközben a kódot tiszta.
Még néhány tipp
Amint láthatja, a CSS változói meglehetősen egyszerű eszköz a használathoz, és nem sok időt vesz igénybe a tanuláshoz. És néhány dolog, amit tudnia kell:
A var () függvény két argumentumot tartalmaz, a második pedig akkor, ha valami hibás a változóval: