Kuidas hõlpsasti CSS-muutujate abil teemasid luua

Üks parimatest CSS-muutujate kasutamise juhtumitest on teema loomine. Ja sellega ei pea ma silmas ainult kogu oma rakenduse teemade muutmist, sest see pole ilmselt midagi, mida peate väga sageli tegema. Asjakohasem on võime komponendispetsiifilisi teemasid hõlpsalt luua .

See võib juhtuda näiteks siis, kui peate märkima e-kaubanduse toote ostukorvi lisatuks. Või võib-olla on teie saidil administraatori jaotis, mis sisaldab tumedamat külgriba jaotist.

CSS-muutujad võimaldavad teil seda teha lihtsamalt ja paindlikumalt, kui see oli varem võimalik. Selles artiklis selgitan täpselt, kuidas.

Olen oma 8-osalisel tasuta CSS-i muutujate kursusel loonud ka teema loomise ekraanikuva. Kui olete huvitatud kursuse kohta lisateabe saamiseks, vaadake seda artiklit.

Seadistamine

Töötame näitena portfellisaidiga. Meie eesmärk on olla üks meie portfelli kuuluvatest projektidest nii, et see eristuks ülejäänud rahvahulgast. Tehniliselt teeme seda, lisades klassi konkreetsele üksusele, mida soovime esile tõsta.

Algselt näeb portfellisait välja järgmine:

Ma ei viitsi rääkida saidi HTML-ist, kuna see on üsna sirge ja eeldan, et te oskate HTML-i. Kui olete aga huvitatud koodiga ringi käimisest, olen siin selle jaoks loonud Scrimba mänguväljaku.

Hüppame nüüd otse CSS-i. Enne CSS-i muutujate kasutamist on siin meie stiilileht:

html, body { background: #ffeead; color: #ff6f69; } h1, p { color: #ff6f69; } #navbar a { color: #ff6f69; } .item { background: #ffcc5c; } button { background: #ff6f69; color: #ffcc5c; } 

Nagu näete, me ainult kasutades kolme värvi siin: #ffeead, #ff9f96ja #ffcc5c. Kasutame neid siiski palju. Nii et see on CSS-muutujate jaoks ideaalne kasutus.

Selle kasutamise alustamiseks peame kõigepealt deklareerima oma muutujad. Teeme seda :rootpseudoklassis:

:root { --red: #ff6f69; --beige: #ffeead; --yellow: #ffcc5c; } 

Seejärel vahetame oma kuueteistkümnendsüsteemi väärtused lihtsalt muutujatega välja:

html, body { background: var(--beige); color: var(--red); } h1, p { color: var(--red); } #navbar a { color: var(--red); } .item { background: var(--yellow); } button { background: var(--red); color: var(--yellow); } 

Nüüd on meie CSS-is muutujate jõud, mis tähendab, et saame lihtsalt muuta --redmillekski muuks ja seda värskendatakse kogu meie saidil.

Kui teil on raskusi siin toimuva mõistmisega, vaadake palun artiklit Minu CSS-muutujate õppimine 5 minutiga või registreeruge kursusele.

Teema loomine

Nüüd loome teema. Soovime võimalust lisada .featuredklass meie ühele neljast projektiüksusest ja seeläbi see üksus ülejäänud hulgast eristuda. Täpsemalt muudame punase #ff5564ja kollase värvi #ffe55b.

Nii näeb see välja märgistuses:

project d

learn more

See muudatus peaks mõjutama stiili neljas erinevas kohas:

  • taustavärv
  • värv

  • taustavärv
  • värv

Vana moodi

Varem pidime selle lahendama, luues iga elemendi sees oleva .featuredelemendi jaoks kohandatud CSS-valija , näiteks:

.featured { background: #ffe55b; } .featured > h1 { color: #ff5564; } .featured > button { background: #ff5564; color: #ffe55b; } 

See lähenemine pole eriti paindlik. Kui peaksite oma portfellikirjetesse lisama veel ühe elemendi, peaksite neile kirjutama ka konkreetsed valijad.

Uus viis

CSS-muutujate abil muutub see aga palju lihtsamaks. Alistame .featuredklassi sees olevad muutujad lihtsalt järgmiselt:

.featured { --yellow: #ffe55b; --red: #ff5564; } 

Kuna CSS-i muutujad on päritud, .featuredviitavad kõik elemendid, milles sees --redvõi kasutatakse --yellownüüd kohalikke väärtusi, mitte globaalseid. Nii et või

elemendid kasutavad muutujate jaoks automaatselt kohalikke väärtusi.

Siit saate teada, kuidas see lehel välja mängib.

Nagu näete, näeb element 'projekt d' välja natuke erinev kui ülejäänud.

Nagu näete, näeb element 'projekt d' välja natuke erinev kui ülejäänud.

Korralik või mis?

Mõelge vaid sellele, kuidas see oleks, kui ehitaksime e-kaubanduse rakenduses keerukama komponendi, näiteks tooteüksuse. See võib sisaldada pealkirju, alapealkirju, lõike, pilte, pealdisi, nuppe, hinnanguid ja palju muud. Palju lihtsam ja paindlikum on mõnede muutujate väärtus lihtsalt ümber pöörata, selle asemel et luua järeltulijatele kohandatud valijaid.

Kui olete huvitatud selle tehnoloogia kohta lisateabe saamiseks, vaadake palun minu tasuta 8-osalist interaktiivset CSS-muutujate kursust Scrimba kohta.

Täname lugemast! Minu nimi on Per Borgen, olen Scrimba asutaja - lihtsaim viis kodeerimise õppimiseks. Kui soovite õppida kaasaegse veebisaidi loomist professionaalsel tasemel, peaksite tutvuma meie reageeriva veebidisaini alglaadimisega.