Haluatko oppia CSS-muuttujia? Tässä on ilmainen 8-osainen kurssini!

Kuva Mikael Kristenson on Unsplash

CSS Variables on kiehtova uusi tekniikka nykyaikaisille selaimille. Se tuo muuttujien voiman CSS: ään, mikä johtaa vähemmän toistoihin, parempaan luettavuuteen ja suurempaan joustavuuteen.

Jotta pääset alkuun, olen luonut ilmaisen kurssin CSS-muuttujista Scrimbaan.

Tämä on jatko ilmaisille CSS-kursseillemme. Aikaisemmin olemme käynnistäneet CSS Grid- ja Flexbox-kursseja. Yhdessä he ovat saaneet reilusti yli 20 000 ilmoittautumista.

Kurssin rakenne

Kurssi sisältää 8 interaktiivista näytönohjausta. Ne ovat kaikki 3–6 minuutin pituisia, koska tavoitteeni on opettaa sinulle CSS-muuttujat mahdollisimman nopeasti. Joidenkin lopussa annan sinulle haasteen ja rohkaisen sinua pelaamaan koodilla interaktiivisesti. Tämä voidaan tehdä suoraan selaimessa, koska Scrimba-näytöt tekevät tämän mahdolliseksi.

Koko kurssin aikana työskentelemme hyvin yksinkertaisen portfolio-verkkosivuston kanssa, koska se antaa meille mahdollisuuden tuoda esiin CSS-muuttujien tärkeimmät käyttötapaukset.

Katsotaanpa nyt jokaista oppituntia.

Oppitunti 1: Miksi oppia CSS-muuttujia

Aivan ensimmäisessä näytöksessä puhun siitä, miksi sinun pitäisi oppia CSS-muuttujat. Tarkastelen yleisiä etuja sekä sen etuja SASS- ja LESS-muuttujiin nähden.

Oppitunti 2: Ensimmäinen CSS-muuttuja

Sitten hyppäämme suoraan koodiin. Esitän ensin sinulle, kuinka luot CSS-muuttujan, ja pyydän sinua tekemään saman. On tärkeää, että itse koodaat, etkä katso vain näytönohjauksia, koska se tekee tiedosta paremman.

: juuri {
  - punainen: # ff6f69;
}
vartalo {
  väri: var (- punainen);
}

Oppitunti 3: Ylivoimaiset muuttujat

Jatkamme ohittamista, hienoa konseptia, joka on mahdollista, koska CSS-muuttujilla on pääsy DOM: iin ja ne peritään hierarkiassa. Tämä erottaa ne selvästi SASS- ja LESS-muuttujista, jotka toimivat enemmän vakioina kuin muuttujina, kun ne osuvat selaimeen ja joilla ei ole tietoa DOM: sta.

Oppitunti 4: Paikalliset muuttujat

Paikalliset muuttujat ovat muuttujia, jotka ovat käytettävissä vain tietyllä laajuudella, esimerkiksi sovelluksesi otsikko- tai sivupalkkiosassa. Jos yrität käyttää sitä toisesta laajuudesta, sitä ei määritetä.

Oppitunti 5: CSS-muuttujien käyttäminen

Teemat on yksi CSS-muuttujien suurimmista eduista. Teemakohtaisesti puhun paitsi kokonaisten verkkosivustojen teemoista, mutta myös komponenttikohtaisista teemoista, jotka ovat normaalimpia käyttötapoja (esim. Vaihtamalla kohde visuaalisesti esillä olevaksi niin, että se erottuu joukosta).

Täällä käytämme teemoja tehdäksesi yhden ruudukossa olevista tuotteistamme erottumaan muista.

Oppitunti 6: Muuttujien muuttaminen JavaScriptillä

Voit myös muuttaa CSS-muuttujia JavaScriptillä, mikä on erittäin hyödyllistä. Tämä antaa mahdollisuuden antaa käyttäjille mahdollisuuden muuttaa muuttujia. Jälleen jotain, mikä ei ole mahdollista LESS- ja SASS-muuttujilla. Hyvin tarkoituksenmukainen esimerkki tästä on se, että käyttäjät voivat säätää sivustosi kokonaisfonttikokoa. Tämä tekee siitä helpommin heikkonäköisille ihmisille.

Oppitunti 7: Vastuullisuus CSS-muuttujien kanssa

Koska CSS-muuttujilla on pääsy DOM: iin, niitä voidaan myös muuttaa näytön koon perusteella. Tämä on oikeastaan ​​vain esimerkki ohittamisesta, mutta mielestäni se ansaitsee kokonaan uuden näytönohjauksen, koska reagoivuus on melko ydin nykyään. Etukäyttäjien on käytettävä kaikkea, joka helpottaa reagointia.

Oppiaihe # 8: CSS-muuttujat ja perintö

Vaikka puhun perinnöstä koko kurssin ajan, lopetamme kurssin muutamalla lisähuomautuksella siitä, koska on olemassa pari käyttötapausta, jotka saatat kuvitella toimivan, mutta joita ei.

Ja siinä se on. Näiden nopeiden näytönohjelmien avulla sinulla on vankka käsitys CSS-muuttujista. Niiden katseleminen vie vähemmän kuin 30 minuuttia, ja voit myös säätää toistonopeutta tehdäksesi siitä vielä nopeamman.

Toisin sanoen: Tämä kurssi on todennäköisesti nopein tapa oppia CSS-muuttujat oikein.

Haasteet saattavat tietenkin tehdä siitä hieman enemmän aikaa, mutta ne ovat vapaaehtoisia. Voit valita kuinka interaktiivisen haluat tämän kurssin olevan.

Scrimba-muoto

Kurssi on rakennettu käyttämällä Scrimbaa, interaktiivista koodausnäyttötyökalua, jonka perustajana olen yhdessä Magnuksen ja Sindren kanssa.

Kuten olen jo aiemmin maininnut, Scrimban kanssa ainutlaatuinen asia on se, että näytöt ovat täysin vuorovaikutteisia, mikä tarkoittaa, että voit muokata koodia valettujen osien sisällä.

Tässä on gif, joka selittää konseptin:

Keskeytä näytön lähetys → Muokkaa koodia → Suorita se! → Katso muutokset

Tämä on hieno tapa, kun sinusta tuntuu, että sinun on kokeiltava koodia ymmärtääksesi sitä oikein tai kun haluat vain kopioida osan koodista.

Scrimba-näytöt myös painavat 1% tiedostoista tiedostokokoisena, mikä tarkoittaa, että sen katselu on paljon helpompaa, vaikka Internet-yhteys olisi hidas.

Joten tutustu kurssiin tänään ja onnellinen koodaus :)

Kiitos lukemisesta! Nimeni on Per, olen Scrimban perustaja ja rakastan ihmisten auttamista oppimaan uusia taitoja. Seuraa minua Twitterissä, jos haluat saada ilmoituksen uusista artikkeleista ja lähteistä.