Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

CSS-muuttujat, jotka tunnetaan myös nimellä mukautetut ominaisuudet, auttavat sinua minimoimaan toiston tyylisivuillasi. Tämä puolestaan ​​auttaa sinua säästämään aikaa ja vaivaa, kun teet muutoksia suunnitteluasi. Voit myös olla varma, että et menetä päivitettäviä arvoja.

Pääsy DOM: iin antaa sinun luoda muuttujia, tallentaa niitä ja käyttää niitä uudelleen koko tyylisivullasi.

Kuinka määritellä ja käyttää CSS-muuttujia

Voit tehdä tyylisivuistasi järjestetympiä, ylläpidettävämpiä ja uudelleenkäytettävimpiä käyttämällä CSS-muuttujia missä tahansa ominaisuudessa, joka hyväksyy arvon.

Otetaan seuraava esimerkki HTML-tiedostosta ja CSS-tiedostosta, joka ei käytä CSS-muuttujia.

HTML:

html>
<htmllang="en">
<pää>
<otsikko>CSS-muuttujat - Painikkeiden muunnelmatotsikko>
<linkkirel="tyylitaulukko"href="Variables.css" />
pää>
<kehon>
<div>
<h1>CSS-muuttujath1>
<div>





instagram viewer

CSS:

.btn {
pehmuste: 1rem 1.5 rem;
 tausta: läpinäkyvä;
 fontin paino: 700;
 väri punainen;
}

Tältä sivusi pitäisi näyttää:

The .btn Yllä olevassa tyylitaulukossa käytetty luokka ei ole dynaaminen, ja se saa sinut luomaan erillisen luokan yksittäisten painikkeiden mukauttamista varten. Kauniiden verkkosivustojen luominen edellyttää, että olet dynaaminen käyttöliittymäsi muotoilussa. Painikkeiden toteuttaminen tällä tavalla tekee tehtävästä yksinkertaisesti tuskallisen.

Kuten useimmat ohjelmointikielet, sinun on alustettava ja korvattava CSS-muuttujat.

Alusta CSS-muuttuja liittämällä muuttujan nimen eteen kaksoisyhdysviivat:

:root{
/*CSS-muuttuja*/
--muuttujan_nimi: arvo;
}

Voit alustaa muuttujan missä tahansa, mutta huomaa, että voit käyttää kyseistä muuttujaa vain alustetun valitsimen sisällä. Tämän vuoksi CSS-muuttujat alustetaan tavanomaisesti juurivalitsimessa. Tämä kohdistaa DOM: n korkeimman tason elementtiin ja mahdollistaa muuttujien pääsyn koko HTML-dokumenttiin maailmanlaajuisesti.

Jos haluat korvata muuttujan CSS-tyyliisi, käytä var() omaisuus:

:root {
/*CSS-muuttuja*/
 --ensisijainen: #900c3f;
 --toissijainen: #ff5733;
}
.btn {
pehmuste: 1rem 1.5 rem;
 tausta: läpinäkyvä;
 fontin paino: 700;
 väri: var(--ensisijainen);
 taustaväri: var(--toissijainen);
}
.sub-primary {
 väri: var(--toissijainen);
 taustaväri: var(--ensisijainen);
}

Juurivalitsin sisältää kaksi muuttujaa: --ensisijainen ja --toissijainen. Molemmat muuttujat korvataan sitten muuttujilla .btn luokkaa värinä ja taustavärinä.

Muuttujien avulla voit muotoilla yksittäisiä elementtejä paljon helpommin. Käyttämällä muuttujia uudelleen, voit muuttaa arvoa nopeasti kerran päivittääksesi sen joka tapauksessa.

The var() ominaisuus voi ottaa myös toisen argumentin. Tämä argumentti toimii varaarvona ensimmäiselle argumentille tilanteessa, jossa ensimmäistä ei ole määritetty tai se on virheellinen.

Esimerkiksi:

:root {
 --ensisijainen: #900c3f;
 --toissijainen: #ff5733;
}
.btn {
pehmuste: 1rem 1.5 rem;
 tausta: läpinäkyvä;
 fontin paino: 700;
 väri: var(--ensisijainen, sininen);
}

Korvaa tässä esimerkissä --ensisijainen muuttuja osaksi väri tyyli. Jos tämä arvo jostain syystä epäonnistuu, tyylisivu käyttää toista arvoa varavaihtoehtona. Voit myös käyttää toista CSS-muuttujaa varaarvona.

CSS-muuttujien manipulointi ja ohittaminen JavaScriptillä

CSS-muuttujien manipulointi JavaScriptin avulla voi olla tehokas tapa muuttaa verkkosivustosi ulkoasua ja tuntumaa lennossa. JavaScriptin avulla voit päivittää näiden muuttujien arvot ja nähdä muutokset näkyvät sivustossasi.

On tärkeää huomata, että JavaScriptillä tehdyt muutokset koskevat vain nykyistä istuntoa. Sinun on joko päivitettävä alkuperäinen lähde tai tallentaa uuden arvon asiakkaalle, kuten evästeeseen, muutosten säilyttämiseksi.

Tässä on esimerkki JavaScriptin käyttämisestä CSS-muuttujan arvon päivittämiseen.

HTML:

html>
<htmllang="en">
<pää>
<otsikko>CSS-muuttujat - Painikkeiden muunnelmatotsikko>
<linkkirel="tyylitaulukko"href="Variables.css" />
<käsikirjoitus>
toimintoVaihda väri() {
// Hanki elementti, jonka muuttujaa haluat muuttaa
konst myElement = asiakirja.querySelector(":root");
// Hanki muuttujan nykyinen arvo
antaa currentValue = getComputedStyle (myElement).getPropertyValue(
"--toissijainen"
 );
 // Aseta the Uusiarvovarten the muuttuja
myElement.tyyli.setProperty("--toissijainen", "#DAF7A6");
 }
käsikirjoitus>
pää>
<kehon>
<div>
<h1>CSS-muuttujath1>
<div>

CSS:

:root {
 --ensisijainen: #900c3f;
 --toissijainen: #ff5733;
}
.btn {
pehmuste: 1rem 1.5 rem;
 tausta: läpinäkyvä;
 fontin paino: 700;
}
.sub-primary {
 väri: var(--ensisijainen);
 taustaväri: var(--toissijainen);
}

Tässä JavaScript-koodissa Vaihda väri() toiminto päivittää ensimmäisen painikkeen värin, kun käyttäjä napsauttaa sitä.

Käyttämällä DOM-läpikulkumenetelmät, voit käyttää HTML-asiakirjassasi käytettyjä luokkia tai valitsimia ja muokata arvoja.

Ennen kuin napsautat painiketta:

Napin painalluksen jälkeen:

Voit myös luoda uusia CSS-muuttujia tai poistaa ne kokonaan JavaScriptin avulla.

Esimerkiksi:

// Luoda a Uusimuuttuja
asiakirja.documentElement.style.setProperty('--uusi-väri', 'sininen');
// Poista muuttuja
asiakirja.documentElement.style.removeProperty('--uusi-väri');

CSS-muuttujien käyttö esiprosessorien kanssa

Muuttujien käyttö käyttöliittymätekniikassa saavutettiin alun perin CSS-esiprosessoreilla, kuten SASS, LESS ja Stylus.

CSS-esiprosessorien tarkoitus on kehittää koodia, joka laajentaa standardin CSS: n perusominaisuuksia. Koota sitten tämä koodi tavalliseen CSS: ään, jotta selain ymmärtää, aivan kuten miten TypeScript toimii JavaScriptin kanssa.

CSS-muuttujien kehityksen myötä esiprosessorit eivät ole enää yhtä tärkeitä, mutta ne voivat silti tarjota käyttöä, jos ne yhdistetään CSS-muuttujien kanssa projektissasi.

Voit määrittää SASS-muuttujan $pääväri ja käytä sitä CSS-muuttujan arvon asettamiseen. Käytä sitten CSS-muuttujaa tavallisessa tyyliluokassa.

Voit myös käyttää SASS-funktioita manipuloidaksesi CSS-muuttujien arvoja.

Esimerkiksi:

:root {
 --ensisijainen: $pääväri;
 --secondary: lighten(var(--ensisijainen), 20%);
}
.btn {
 väri: var(--ensisijainen);
 taustaväri: var(--toissijainen);
}

Tässä SASS-toiminto keventää() manipuloi arvoa --ensisijainen saada arvo --toissijainen.

Huomaa, että SASS-muuttujat eivät ole JavaScriptin käytettävissä. Joten jos sinun on manipuloitava muuttujien arvoja ajon aikana, sinun tulee käyttää CSS-muuttujia.

Käyttämällä CSS-muuttujia ja esiprosessoreja yhdessä voit hyötyä molemmista eduista, kuten käytön tehokkaat esikäsittelyominaisuudet, kuten silmukat ja funktiot, sekä CSS-muuttujat, kuten CSS peräkkäin.

Vinkkejä CSS-muuttujien käyttämiseen verkkokehityksessä

Tässä on muutamia tärkeitä vinkkejä, jotka auttavat sinua hyödyntämään CSS-muuttujia paremmin.

Aloita selkeällä nimeämissopimuksella

Valitse muuttujillesi sellainen nimeämistapa, jonka avulla ne on helppo ymmärtää ja käyttää. Käytä esimerkiksi etuliitettä, kuten --väri- värimuuttujille tai --välilyönti- välimuuttujille.

Käytä muuttujia mediakyselyissä, jotta voit helposti muokata ulkoasua eri näyttökokoja varten.

Hyödynnä CSS: n peräkkäistä luonnetta

Muista, että CSS-muuttujat ovat peräkkäisiä, mikä tarkoittaa, että jos asetat muuttujan pääelementille, se vaikuttaa kaikkiin sen aliarvoihin.

Käytä CSS-muuttujia varoen

Liian monien CSS-muuttujien käyttö voi aiheuttaa sekaannusta, joten käytä niitä varoen ja vain silloin, kun se on järkevää ja parantaa koodisi ylläpidettävyyttä.

Testaa muuttujiasi

CSS-muuttujat ovat ainutlaatuinen tapa kirjoittaa selkeää ja ylläpidettävää koodia tyylisivullesi.

On tärkeää huomata, että niitä ei edelleenkään tueta täysin kaikissa selaimissa. Siksi sinun tulee testata muuttujien selaimen yhteensopivuus varmistaaksesi, että ne toimivat odotetulla tavalla ja että kaikki vara-arvot toimivat odotetulla tavalla.