Mukautettujen ominaisuuksien määrittäminen ja käyttö
Määrittäkää CSS:n mukautetut ominaisuudet ---etuliitteellä ja käyttäkää niitä var()-funktiolla.
Mukautettujen ominaisuuksien määrittäminen ja käyttö on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä CSS:n mukautetut ominaisuudet ovat
CSS:n mukautettujen ominaisuuksien (joita kutsutaan myös CSS-muuttujiksi) avulla voitte määrittää uudelleenkäytettävän arvon kerran ja käyttää sitä kaikkialla tyylitiedostossanne. Niissä käytetään syntaksia --name: value.
Mukautettujen ominaisuuksien määrittäminen
Määrittäkää mukautettuja ominaisuuksia mille tahansa elementille. Kun määritätte ne :root-elementille, ne ovat käytettävissä kaikkialla:
<div class="demo">Custom properties declared on :root</div>
var()-funktion käyttäminen
Viitatkaa mukautettuun ominaisuuteen var()-funktiolla:
<button>Styled Button</button>
Mukautetut ominaisuudet periytyvät
Mukautetut ominaisuudet noudattavat CSS:n normaalia periytymistä. Vanhemmalle määritetty ominaisuus on käytettävissä kaikilla sen jälkeläisillä, ellei sitä korvata.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Virheelliset mukautettujen ominaisuuksien arvot
Toisin kuin tavallisten CSS-ominaisuuksien kohdalla, virheellinen mukautetun ominaisuuden arvo ei johda määrityksen ohittamiseen — muuttuja palauttaa arvonsa sellaisenaan. Käyttävä ominaisuus määrittää sen jälkeen, onko arvo kelvollinen.
Mukautetut ominaisuudet ja Sass-muuttujat
Keskeiset erot:
- CSS:n mukautetut ominaisuudet ovat selaimessa dynaamisia — ne päivittyvät automaattisesti
- Sass-muuttujat poistuvat koontivaiheessa
- Mukautettuja ominaisuuksia voidaan muuttaa JavaScriptillä
- Mukautetut ominaisuudet noudattavat kaskadia ja periytymistä
Nimeämiskäytännöt
Nimetkää mukautetut ominaisuudet semanttisesti, älkää niiden visuaalisen arvon perusteella. Näin niitä on helppo päivittää myöhemmin:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Globaali ja komponentin vaikutusalue
Määrittäkää globaalit tunnisteet :root-elementissä ja komponenttikohtaiset arvot komponentin juuriluokassa:
<div class="card">Global font-size-base + component-scoped card vars</div>
Mukautetut ominaisuudet calc()-funktiossa
Mukautetut ominaisuudet toimivat calc()-funktion sisällä — niiden on sisällettävä yksiköt, jos niitä käytetään mittojen laskemiseen:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Responsiiviset mukautetut ominaisuudet
Muuttakaa mukautettujen ominaisuuksien arvoja media queryjen sisällä responsiivisia tunnistejärjestelmiä varten:
<div class="section">Padding grows to 6rem on wide screens</div>
Mukautetut ominaisuudet animaatioissa
Animoikaa elementtejä muuttamalla mukautettua ominaisuutta (usein JavaScriptillä) useiden yksittäisten ominaisuuksien sijaan:
<div class="progress-track">
<div class="progress"></div>
</div>
Pikatarkistus
Miten määritätte globaalin CSS:n mukautetun ominaisuuden nimeltä --accent?
Kertaus
CSS:n mukautetut ominaisuudet määritetään syntaksilla --name: value ja niitä käytetään syntaksilla var(--name). Määrittäkää globaalit tunnisteet :root-elementissä ja rajatkaa komponenttien arvot komponenttien valitsimiin. Ne ovat dynaamisia, huomioivat kaskadin ja niitä voidaan muuttaa JavaScriptillä — siksi ne ovat huomattavasti Sass-muuttujia tehokkaampia.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Mukautettujen ominaisuuksien määrittäminen ja käyttö” ilmainen?
Kyllä – oppitunnin ”Mukautettujen ominaisuuksien määrittäminen ja käyttö” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mukautettujen ominaisuuksien määrittäminen ja käyttö”?
Määrittäkää CSS:n mukautetut ominaisuudet ---etuliitteellä ja käyttäkää niitä var()-funktiolla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Mukautettujen ominaisuuksien määrittäminen ja käyttö”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Mukautettujen ominaisuuksien määrittäminen ja käyttö
- Oletusarvot ja var()
- Muuttujien rajaaminen komponentteihin
- Muuttujien päivittäminen JavaScriptillä