CSS-i muutujad, mida tuntakse ka kohandatud atribuutidena, aitavad teil stiililehtedel korduvust minimeerida. See omakorda aitab säästa aega ja vaeva kujunduses muudatuste tegemisel. Samuti võite olla kindel, et te ei jäta unustamata ühtegi väärtust, mida peate värskendama.
Juurdepääs DOM-ile võimaldab teil luua muutujaid, neid salvestada ja kogu stiililehes uuesti kasutada.
Kuidas defineerida ja kasutada CSS-i muutujaid
Stiililehtede korrastatumaks, hooldatavamaks ja korduvkasutatavamaks muutmiseks saate kasutada CSS-i muutujaid mis tahes väärtust aktsepteerivas atribuudis.
Võtke järgmine näide HTML-failist ja CSS-failist, mis ei kasuta CSS-i muutujaid.
HTML:
html>
<htmllang="en">
<pea>
<pealkiri>CSS-i muutujad – nuppude variatsioonidpealkiri>
<linkrel="laadileht"href="Muutujad.css" />
pea>
<keha>
<div>
<h1>CSS-i muutujadh1>
<div>
CSS:
.btn {
polsterdus: 1rem 1.5rem;
taust: läbipaistev;
fondi kaal: 700;
värv: punane;
}
Selline peaks teie leht välja nägema:
The .btn Ülaltoodud stiililehel kasutatav klass ei ole dünaamiline ja põhjustab üksikute nuppude kohandamiseks eraldi klassi loomise. Kaunite veebisaitide loomine eeldab, et olete esiotsa stiiliga dünaamiline. Nuppude sel viisil rakendamine muudab selle ülesande täitmise lihtsalt vaevaliseks.
Nagu enamik programmeerimiskeeli, peate ka CSS-i muutujad lähtestama ja asendama.
CSS-muutuja lähtestamiseks lisage muutuja nime ette topeltsidekriipsud:
:juur{
/*CSS-muutuja*/
--muutuja_nimi: väärtus;
}
Muutuja saate lähtestada kõikjal, kuid pange tähele, et saate seda muutujat kasutada ainult lähtestatud valijas. Seetõttu lähtestatakse CSS-i muutujad tavaliselt juurvalija sees. See sihib DOM-i kõrgeima taseme elementi ja võimaldab muutujatele juurdepääsu kogu HTML-dokumendile globaalsel skaalal.
Muutuja asendamiseks oma CSS-stiilis kasutate var() vara:
:juur {
/*CSS-muutuja*/
-- esmane: #900c3f;
-- teisene: #ff5733;
}.btn {
polsterdus: 1rem 1.5rem;
taust: läbipaistev;
fondi kaal: 700;
värv: var(--esmane);
taustavärv: var(--teisejärguline);
}
.sub-esmane {
värv: var(--teisejärguline);
taustavärv: var(--esmane);
}
Juurvalija sisaldab kahte muutujat: -- esmane ja -- teisejärguline. Seejärel asendatakse mõlemad muutujad .btn klassi värvi ja taustavärvina.
Muutujate abil saate üksikuid elemente palju lihtsamalt stiilida. Muutujaid taaskasutades saate väärtust kiiresti üks kord muuta, et seda igal juhul värskendada.
The var() omadus võib võtta ka teise argumendi. See argument toimib esimese argumendi varuväärtusena olukorras, kus esimene pole määratletud või on kehtetu.
Näiteks:
:juur {
-- esmane: #900c3f;
-- teisene: #ff5733;
}
.btn {
polsterdus: 1rem 1.5rem;
taust: läbipaistev;
fondi kaal: 700;
värv: var(--esmane, sinine);
}
Selles näites asendage -- esmane muutuja sisse värvi stiilis. Kui see väärtus mingil põhjusel ebaõnnestub, kasutab laadileht teist väärtust varuvariandina. Varuväärtusena saate kasutada ka teist CSS-i muutujat.
CSS-i muutujate manipuleerimine ja alistamine JavaScriptiga
CSS-i muutujatega manipuleerimine JavaScripti abil võib olla võimas viis muuta oma veebisaidi välimust ja tunnet lennult. JavaScripti kasutades saate värskendada nende muutujate väärtusi ja näha muudatusi oma saidil.
Oluline on arvestada, et JavaScriptiga tehtud muudatused rakenduvad ainult praegusele seansile. Peate kas värskendama algallikat või salvestab uue väärtuse kliendile nagu küpsisesse, et muudatusi säilitada.
Siin on näide JavaScripti kasutamisest CSS-i muutuja väärtuse värskendamiseks.
HTML:
html>
<htmllang="en">
<pea>
<pealkiri>CSS-i muutujad – nuppude variatsioonidpealkiri>
<linkrel="laadileht"href="Muutujad.css" />
<stsenaarium>
funktsioonimuuda Värvi() {
// Hankige element, mille muutujat soovite muuta
konst minuElement = dokument.querySelector(":root");// Hangi muutuja praegune väärtus
lase currentValue = getComputedStyle (minuElement).getPropertyValue(
"--sekundaarne"
);
// Määra a uusväärtusjaoks a muutuv
minuElement.stiilis.setProperty("-- teisejärguline", "#DAF7A6");
}
stsenaarium>
pea>
<keha>
<div>
<h1>CSS-i muutujadh1>
<div>
CSS:
:juur {
-- esmane: #900c3f;
-- teisene: #ff5733;
}.btn {
polsterdus: 1rem 1.5rem;
taust: läbipaistev;
fondi kaal: 700;
}
.sub-esmane {
värv: var(--esmane);
taustavärv: var(--teisejärguline);
}
Selles JavaScripti koodis on muuda värvi() funktsioon värskendab esimese nupu värvi, kui kasutaja sellel klõpsab.
Kasutades DOM-i läbimise meetodid, pääsete juurde oma HTML-dokumendis rakendatud klassidele või valijatele ja saate väärtusi manipuleerida.
Enne nupu klõpsamist:
Pärast nupu klõpsamist:
Samuti saate JavaScripti kasutada uute CSS-muutujate loomiseks või nende täielikuks eemaldamiseks.
Näiteks:
// Loo a uusmuutuv
dokument.documentElement.style.setProperty("--uus-värv", 'sinine');
// Muutuja eemaldamine
dokument.documentElement.style.removeProperty("--uus-värv");
CSS-i muutujate kasutamine eelprotsessoritega
Muutujate kasutamine esiotsa tehnoloogias saavutati algselt CSS-i eelprotsessoritega nagu SASS, LESS ja Stylus.
CSS-i eeltöötlejate eesmärk on välja töötada kood, mis laiendab standardse CSS-i põhilisi võimalusi. Seejärel laske see kood standardseks CSS-iks kompileerida, et brauser sellest aru saaks kuidas TypeScript JavaScriptiga töötab.
CSS-i muutujate arendamisel ei ole eeltöötlejad enam nii olulised, kuid need võivad siiski pakkuda mõningast kasutust, kui neid teie projektis CSS-muutujatega kombineerida.
Saate määratleda SASS-muutuja $põhivärv ja kasutage seda CSS-muutuja väärtuse määramiseks. Seejärel kasutage tavalises stiiliklassis CSS-i muutujat.
CSS-i muutujate väärtustega manipuleerimiseks saate kasutada ka SASS-i funktsioone.
Näiteks:
:juur {
--primary: $peamine-värv;
--sekundaarne: lighten(var(--esmane), 20%);
}
.btn {
värv: var(--esmane);
taustavärv: var(--teisejärguline);
}
Siin on SASS-funktsioon kergendama () manipuleerib väärtusega -- esmane jaoks väärtuse saamiseks -- teisejärguline.
Pange tähele, et JavaScript ei pääse SASS-i muutujatele juurde. Nii et kui teil on vaja käitusajal muutujate väärtusi manipuleerida, peaksite kasutama CSS-i muutujaid.
Kasutades koos CSS-i muutujaid ja eeltöötlejaid, saate kasutada mõlemat eelist, näiteks kasutamist võimsad eelprotsessori funktsioonid, nagu tsüklid ja funktsioonid, ning CSS-muutujate funktsioon, nagu CSS kaskaadne.
Näpunäiteid CSS-i muutujate kasutamiseks veebiarenduses
Siin on mõned olulised näpunäited, mis aitavad teil CSS-i muutujaid paremini kasutada.
Alustage selgest nimetamise konventsioonist
Valige muutujatele selline nimetamisviis, mis muudab need hõlpsasti mõistetavaks ja kasutatavaks. Näiteks kasutage eesliidet nagu --värv- värvimuutujate jaoks või --vahe- vahemuutujate jaoks.
Kasutage meediumipäringutes muutujaid, et hõlbustada kujunduse kohandamist erinevate ekraanisuuruste jaoks.
Kasutage CSS-i kaskaadset olemust
Pidage meeles, et CSS-i muutujad on kaskaadsed, mis tähendab, et kui määrate muutuja ülemelemendile, mõjutab see kõiki selle alamelemente.
Kasutage CSS-i muutujaid ettevaatusega
Liiga paljude CSS-muutujate kasutamine võib põhjustada segadust, seega kasutage neid ettevaatlikult ja ainult siis, kui see on mõistlik ja parandab teie koodi hooldatavust.
Testige oma muutujaid
CSS-muutujad on ainulaadne viis oma stiililehele selge ja hooldatava koodi kirjutamiseks.
Oluline on märkida, et neid ei toetata endiselt täielikult kõigis brauserites. Seetõttu peaksite testima oma muutujaid brauseri ühilduvuse osas, et veenduda, et need töötavad ootuspäraselt ja et kõik varuväärtused töötaksid ootuspäraselt.
