Hogyan kell beállítani a helyszíni témákat CSS változókkal

A CSS egyéni tulajdonságait, amelyeket általában CSS-változóknak neveznek, minden nagyobb modern böngésző támogatja. Ez azt jelenti, hogy olyan projektek esetében, amelyek nem terhelik az örökölt böngészők támogatását, mint például az Internet Explorer, a CSS változók figyelembe vehetők - minden szándékra és célra - biztonságos használatra.

Sok fejlesztő már használhat változókat az előfeldolgozókkal, mint például a SASS vagy Kevésbé A kód ismétlésének csökkentése. A natív CSS változók nagyrészt ugyanúgy működnek, de nem igényel további építési lépést, a kaszkád, mint egy rendszeres CSS tulajdonság, és ami a legfontosabb, elérhető a futásidőben. (Ahhoz, hogy a webhelyét zökkenőmentesen futtassa, győződjön meg róla, hogy a jogot választotta web hosting szolgáltatás.)

• Mi a sass?

Ezek az előnyök biztosítják a natív CSS változókat az előfeldolgozó testvéreinek szélén, és megnyitják az ajtót a fejlesztők számára, hogy sok érdekes dolgot csináljanak, sokkal kevesebb kóddal. Érdekelt a nulla kódolási lehetőségek webhelyére? Itt van az útmutató a tetejére weboldal építője .

Ebben a bemutatóban meg fogjuk vizsgálni, hogyan lehet használni a CSS változókat, hogy megvalósítsuk a weboldal témájukat a NoteApp. Ez azt jelenti, hogy írásban van Css és JavaScript Annak érdekében, hogy a felhasználó megváltoztassa a színsémát, és átkapcsolja a megjelenített oszlopok mennyiségét. Ezután kihasználjuk a web tároló API-t, hogy megbizonyosodjon arról, hogy a változások mentésre kerülnek a jövőbeni munkamenetekért.

Szerezd meg a bemutatófájlokat

Először töltse le az első dolgokat, töltse le a projektfájlokat Web Designer filesilo (264. kérdés). Megjegyzés: Az első alkalommal a felhasználóknak regisztrálni kell a Filesilo használatához.

01. Állítsa be a munkaterületet

Ban,-ben / weboldal-sablon Könyvtár Megtalálja a Statikus NoteaPP weboldalt, amelyben a CSS változók és a web tároló API segítségével végrehajtjuk a weboldal-témákat. Nyissa meg a könyvtárat a kívánt szövegszerkesztőben.

02. Állítsa be a CSS-változókat

Ban ben main.css , megtalálja a projekt CSS-jét. A tetején hozzon létre egy blokkot célzó blokkot gyökér pszeudo-osztály. Belül olyan változókat határoz meg, mint az alábbi részletek. Ez a gyökérblokk olyan globális változókat tartalmaz, amelyek kaszkádoznak a stíluslapunkon, mint bármely rendszeres CSS tulajdonság.

: Gyökér {
  - "2F353E;
  --SECONDARY: # 2B9BCA;
  - Sterteiary: # F3583F;
  --quaternary: # E0E1E2;
  --quinárius: #FFFFFF;
} 

03. Cserélje ki a színek változókkal

Menj át a stíluslapot, vagy manuálisan, vagy a find / replace, és a swap a statikus szín hexadecimális kódok a megfelelő változót a gyökér blokk. Ehhez használja a varha Funkció és átadja a változó nevét. Ez azt mondja a böngészőnek, hogy hivatkozzon arra a változó értékére. Például:

 .c-header {
  Háttérszín: var (- primer);
  Szín: var (- nyugdíjas);
} 

04. Keresse meg az inline svg ikonokat

Nyisd ki index.html és az egyik első dolog, amit észre vesz, egy nagy SVG elem. Ez tartalmazza az összes oldal ikonjait, amelyek mindegyike egy szimbólumelembe csomagolva, és egyedi azonosítót kap. Ezeket a szimbólumokat, ha szükséges, ha szükséges a használat Elem, amely lehetővé teszi az ikonok újrafelhasználását az SVG kód másolása nélkül.

05. Add hozzá a CSS változókat az SVG-hez

Az inline svg használatának előnye a .svg fájl helyett, hogy a CSS hozzáférhet a belső struktúrájához. Ez azt jelenti, hogy a CSS-változók (ellenőrizze a böngésző támogatását) itt ). Ban ben index.html , Cserélje ki az SVG stílusblokkját az alábbi részletekkel. Most mindegyik SVG színek kapcsolódnak a CSS változók értékeivel.

 & lt; style & gt;
  .elsődleges {
  Töltse ki: var (-primary, # 2f353E);
  }
  .secondary {
  Töltse ki: var (-secondary, # 2b9bca);
  }
& Lt; / Style & Gt; 

06. Hozzon létre egy oszlopok változóját

A CSS-változókat a színen kívüli tulajdonságokhoz is használhatjuk. Hozzon létre egy új változót a gyökérblokkban, hívja meg oszlopok , és adja meg a 3. értéket. Ezzel meg kell egyeznie a Oszlopok UI komponens az oldalon. Ha funkcionális, akkor ez az összetevő átkapcsolja az oszlopok számát.

: Gyökér {
  - "2F353E;
  --SECONDARY: # 2B9BCA;
  - Sterteiary: # F3583F;
  --quaternary: # E0E1E2;
  --quinárius: #FFFFFF;
  --Columbs: 3;
} 

07. Az oszlopok átkapcsolása

Új oszlopok változójával és a Calc () Funkció, most kiszámítjuk, milyen széleskörűek kell lenniük a megfelelő számú oszlopok létrehozásához. Például, ha az oszlopok 4-re vannak állítva, minden jegyzetnek 25% -os szélessége van.

 .c-jegyzet {
  Szélesség: Calc (100% / var (oszlopok));
} 

08. JS osztályok és adat attribútumok hozzáadása

Amikor a JS viselkedést a DOM elemre alkalmazza, csatlakoztasson egy JS előtaggal rendelkező osztályon keresztül. Ez a CSS-k egy elemének funkcionális aspektusait mutatja be. Adjunk hozzá egy JS-Update-változó osztály az összes szín- és rádióbemenethez, valamint a adat-attribútum A frissítéshez szükséges változó hivatkozása.

 & lt; input type = "szín" érték = "# 2f353e"
osztály = "JS-Update-változó U-rejtett-vizuálisan"
Adatváltozó = "Elsődleges" & GT; 

09. Add hozzá a JS-t a CSS változók frissítéséhez

Nyisd ki main.js és adja hozzá az alábbi részleteket. Ez az összes hurok az összes JS-Update-változó Bemenetek és hozzáadja a logikát, így a változás, az adat-változó attribútumban hivatkozott változó frissül a bemeneti értékkel. A színminták és az oszlopkapcsolatnak most működik!

 VAR VARTRIG = dokumentum
.queryselectorall (". JS-Update-változó");
(var i = 0; i & lt; varrig.lengnth, i ++) {
VARTRIG [I]
.addeventlistener ("Change", Funkció () {
document.documentElement.style
.SetProperty ("-" + this.dataset.Varable,
ez.értékű);
});
} 

10. Csatlakoztassa a JS osztályt a Mentés gombra

Érdemes megmenteni a felhasználó színsémáját, ha kattint a Mentés gombra, mivel ez lehetővé teszi számukra, hogy kísérletezzenek a témákkal, amennyire csak szeretnének, anélkül, hogy automatikusan kikerülnének az aktuálisnak. Elkezdeni, adjunk hozzá .js-mentési színek hoz Mentés gomb a JS horogként.

 & lt; gomb osztály = "C-Button JS-Save-színek"
Adatmodális = "JS-Modal" adatmodális
-Content = "JS-színek-modális-tartalom" & gt;
Mentés & lt; / gomb és gt; 

11. Hozzon létre színek tömböt

Vissza main.js , nyilatkozzon egy új változót színek és rendeljen hozzá egy új tömböt, amely az összes szín változó akarunk menteni, ha a megtakarítás gombra kattintás.

 var színek = [
  "elsődleges",
  "másodlagos",
  "harmadlagos",
  "Quaternary",
  "ötös"
]; 

12. Mentés gomb Esemény-hallgatója

A színek tömbje alatt hozzon létre egy kattintási esemény hallgatót a JS-Save-színek Osztály, amelyet korábban hozzáadunk a Mentés gombhoz. Belül létrehoz egy új változót htmlstyles és hozzárendelje a root html elem számított tulajdonságait. Ezt használjuk, hogy elérjük a CSS-változókat.

 Document.QuerySelector (". JS-Save-colors")
.addeventlistener ("kattintás", funkció () {
var htmlstyles = ablak
.getComputedstyle (dokumentum)
.quereSselector ("html")),
}), 

13. A CSS színváltozók rögzítése

Ezután az eseményhallgatón belül hozzon létre egy új változót colourstosave és hozzárendeljen egy üres objektumot. Ezután hozzon létre egy -Ért hurok a színek tömb a 11. lépésben. belül hozzáadunk egy teljes kulcs / érték rekordot az említett változók a színek tömb a colourstosave tárgy.

 Array a "Colourstosave" objektumhoz.
colourstosave = új objektum;
mert (var i = 0; i & lt; colours.lengnth, i ++) {
Colourstosave [színek [i]] = htmlstyles
.getpropertyvalue ("-" + színek [i]);
} 

14. Küldje el Colourstosave-t a lokalizáláshoz

Most már megvan az összes színes változó colourstosave , Elküldjük a localStorage webes tárolási API összetevőjét. Ez lényegében egy olyan tárgy, amely az üléseken is fennáll. Más objektumokat tárolhatunk rajta segítségével setitem () módszer. Küldjük el colourstosave tárgy.

 localstorage.setitem ("színek",
JSON.Stringify (Colourstosave)); 

15. Adjon hozzá egy JS osztályt az oszlopokhoz

A színek mellett szeretnénk biztosítani, hogy a választott oszlopok száma szintén fennmaradjon az üléseken. Ennek első lépése lenne hozzáadásához JS-Update-oszlopok az oszlopok összetevőjén belüli összes rádiós bemenetre.

 & lt; input type = "rádió" név = "oszlopok" osztály
= "JS-Update-változó JS-Update-oszlopok
U-rejtett-vizuálisan "érték =" 1 "
Adatváltozó = "oszlopok" és gt; 

16. Küldjön oszlopokat a lokalizáláshoz

Az egyes JS-Update-oszlopok , Következő lesz hozzárendelendő esemény hallgatók, hogy figyeljenek a változásokra. Az észleléskor elküldjük az aktuális értékét oszlopok változó helyi raktár , újra használva setitem () módszer. A színekkel ellentétben nem kell szigorítani ezt az értéket, mivel ez nem objektum.

 var colinputs = dokumentum
.QuereSelectorall (". JS-Update-oszlopok");
a (var i = 0; i & lt; colinputs; i ++) {
colinputs [i] .addeventlistener ("változás",
Funkció () {var htmlstyles = ablak
.getComputedstyle (dokumentum)
.queryselector ("html"));
localstorage.setitem ("oszlopok",
htmlstyles.getpropertyvalue ("oszlopok");
});} 

17. Kezelje az új munkameneteket

Ha a felhasználó visszatér a korábban kiválasztott szín- és oszlop preferenciájának kiválasztása után, akkor logikát kell építeni, így ez a mentett adatok visszafordulnak CSS változókba. Az első lépés az a Domcontentetted eseményhallgató, majd egy ha nyilatkozat, hogy ellenőrizze a localStorage bármely mentett adatait getitem () módszer.

 Dokumentum.addeventlistener
("DOMCONTENTOMED", funkció () {
ha (localstorage.getitem ("színek")) {
}
ha (localstorage.getitem ("oszlopok")) {
}
}); 

18. Színváltozók módosítása

A színekben ha nyilatkozat, hozzon létre egy új változót savedcolours és hozzárendelje az elemzett színek objektumának értékét helyi raktár . Használva BE huroktal savedcolours , Fogja meg az egyes színes kulcs / értékpárt, és adja hozzá a gyökér HTML elemnek CSS-változónak.

 var savedcolours = json.parse
(localstorage.getitem ("színek"));
mert (színek a savedcolours) {
document.documentemelment.style.setproperty
("-" + szín, savedcolours [color]); } 

19. Gyűjtse össze az oszlopváltozókat

Mielőtt módosítanánk az oszlopok változóját, először meg kell ragadnunk hivatkozásokat a mentett adatokra helyi raktár és a rádióbemenetek is a Oszlopok összetevő. Ez utóbbi az, hogy frissíthetjük az állapotát, hogy megbizonyosodjon arról, hogy a megfelelő szám előre van kiválasztva.

 VAR oszlopok = localStory
.getitem ("oszlopok"),
oszlopTriggers = dokumentum.
QuerySelectorall (". JS-Update-oszlopok"); 

20. A változó és az állam módosítása

Végül frissítjük az oszlopok CSS változóját a mentéssel helyi raktár és állítsa be a megfelelő rádióbemenet ellenőrzött attribútumát a Oszlopok komponens igaz. A oszlopok - 1 az, hogy kompenzálja azt a tényt, hogy az oszlopok Nodelista nulla alapú.

 Document.documentElement.style
.SetProperty ("- oszlopok", oszlopok);
oszloptriggerek [oszlopok - 1] .Checked = true; 

21. Tesztelje a készterméket

Ez az! Minden a Mock NoteApp oldalon dolgozni kell. Saját színsémát hozhat létre a színmintákra kattintva, majd kötelezze el azt helyi raktár a Mentés gombon keresztül. Ha szeretné váltani a megjelenített oszlopok mennyiségét, kattintson a megfelelő számra az oszlopok összetevőjében.

És ne feledje, mindig érdemes frissíteni felhő tároló egy új projekt előtt, így képes kezelni a rajta dobott fájlokat.

Ez a cikk eredetileg megjelent a Web Designer magazin 264-ben. Iratkozzon fel itt .

Olvass tovább:

• 15 Tényleg hasznos érzékeny webdesign oktatóanyagok
• Hogyan kezdjük el a SASS-t
• 7 tipp a szín jobb kezeléséhez az interneten