Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

CSS mainīgie, kas pazīstami arī kā pielāgoti rekvizīti, palīdz līdz minimumam samazināt atkārtošanos stila lapās. Tas, savukārt, palīdz ietaupīt laiku un pūles, veicot izmaiņas dizainā. Varat arī būt drošs, ka nepalaidīsit garām nevienu vērtību, kas ir jāatjaunina.

Piekļuve DOM ļauj izveidot mainīgos, saglabāt tos un atkārtoti izmantot tos visā stila lapā.

Kā definēt un lietot CSS mainīgos

Lai stila lapas būtu sakārtotākas, kopjamākas un atkārtoti lietojamas, varat izmantot CSS mainīgos jebkurā rekvizītā, kas pieņem vērtību.

Ņemiet tālāk sniegto piemēru HTML failam un CSS failam, kurā netiek izmantoti CSS mainīgie.

HTML:

html>
<htmllang="lv">
<galvu>
<virsraksts>CSS mainīgie — pogu variācijasvirsraksts>
<saiterel="stila lapa"href="Mainīgie.css" />
galvu>
<ķermeni>
<div>
<h1>CSS mainīgieh1>
<div>
instagram viewer

CSS:

.btn {
polsterējums: 1rem 1.5rem;
 fons: caurspīdīgs;
 fonta svars: 700;
 krāsa: sarkana;
}

Jūsu lapai vajadzētu izskatīties šādi:

The .btn iepriekš minētajā stila lapā izmantotā klase nav dinamiska un liek jums izveidot atsevišķu klasi, lai pielāgotu atsevišķas pogas. Lai izveidotu skaistas vietnes, jums ir jābūt dinamiskam ar priekšgala stilu. Šādi ieviešot pogas, šī uzdevuma izpilde vienkārši būs sāpīga.

Tāpat kā lielākajā daļā programmēšanas valodu, jums ir jāinicializē un jāaizstāj CSS mainīgie.

Lai inicializētu CSS mainīgo, pirms mainīgā nosaukuma pievienojiet dubultās defises:

:root{
/*CSS mainīgais*/
--mainīgā_nosaukums: vērtība;
}

Varat inicializēt mainīgo jebkurā vietā, taču ņemiet vērā, ka šo mainīgo varēsit izmantot tikai inicializētajā atlasītājā. Šī iemesla dēļ CSS mainīgie parasti tiek inicializēti saknes atlasītājā. Tas ir vērsts uz DOM augstākā līmeņa elementu un ļauj mainīgajiem būt pieejamiem visam HTML dokumentam globālā mērogā.

Lai aizstātu mainīgo savā CSS stilā, izmantosit var() īpašums:

:root {
/*CSS mainīgais*/
 --primārs: #900c3f;
 -- sekundārais: #ff5733;
}
.btn {
polsterējums: 1rem 1.5rem;
 fons: caurspīdīgs;
 fonta svars: 700;
 krāsa: var(--primārs);
 fona krāsa: var(--sekundārais);
}
.sub-primārā {
 krāsa: var(--sekundārais);
 fona krāsa: var(--primārs);
}

Saknes atlasītājs satur divus mainīgos: --primārs un -- sekundārais. Pēc tam abi mainīgie tiek aizstāti ar .btn kā krāsu un fona krāsu attiecīgi.

Izmantojot mainīgos, jūs varat daudz vienkāršāk veidot atsevišķu elementu stilu. Atkārtoti izmantojot mainīgos, varat ātri vienreiz mainīt vērtību, lai to atjauninātu katrā gadījumā.

The var() īpašumam var būt arī otrs arguments. Šis arguments darbojas kā atkāpšanās vērtība pirmajam argumentam situācijā, kad pirmais nav definēts vai ir nederīgs.

Piemēram:

:root {
 --primārs: #900c3f;
 -- sekundārais: #ff5733;
}
.btn {
polsterējums: 1rem 1.5rem;
 fons: caurspīdīgs;
 fonta svars: 700;
 krāsa: var(--primārais, zils);
}

Šajā piemērā aizstājiet ar --primārs mainīgs vērā krāsa stils. Ja kāda iemesla dēļ šī vērtība neizdodas, stila lapa izmantos otro vērtību kā rezerves vērtību. Varat arī izmantot citu CSS mainīgo kā atkāpšanās vērtību.

CSS mainīgo manipulēšana un ignorēšana, izmantojot JavaScript

Manipulēšana ar CSS mainīgajiem, izmantojot JavaScript, var būt efektīvs veids, kā ātri mainīt vietnes izskatu un darbību. Izmantojot JavaScript, varat atjaunināt šo mainīgo vērtības un skatīt izmaiņas, kas tiek atspoguļotas jūsu vietnē.

Ir svarīgi ņemt vērā, ka izmaiņas, kas veiktas, izmantojot JavaScript, attieksies tikai uz pašreizējo sesiju. Jums ir vai nu jāatjaunina sākotnējais avots, vai saglabājiet jauno vērtību klientam, piemēram, sīkfailā, lai saglabātu izmaiņas.

Šeit ir piemērs, kā izmantot JavaScript, lai atjauninātu CSS mainīgā vērtību.

HTML:

html>
<htmllang="lv">
<galvu>
<virsraksts>CSS mainīgie — pogu variācijasvirsraksts>
<saiterel="stila lapa"href="Mainīgie.css" />
<skripts>
funkcijumainīt krāsu() {
// Iegūstiet elementu, kurā vēlaties mainīt mainīgo
konst myElement = dokumentu.querySelector(":root");
// Iegūstiet mainīgā pašreizējo vērtību
ļaut currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundārais"
 );
 // Iestatīt uz jaunsvērtībupriekš uz mainīgs
myElement.stils.setProperty("-- sekundārais", "#DAF7A6");
 }
skripts>
galvu>
<ķermeni>
<div>
<h1>CSS mainīgieh1>
<div>

CSS:

:root {
 --primārs: #900c3f;
 -- sekundārais: #ff5733;
}
.btn {
polsterējums: 1rem 1.5rem;
 fons: caurspīdīgs;
 fonta svars: 700;
}
.sub-primārā {
 krāsa: var(--primārs);
 fona krāsa: var(--sekundārais);
}

Šajā JavaScript kodā mainīt krāsu () funkcija atjaunina pirmās pogas krāsu, kad lietotājs uz tās noklikšķina.

Izmantojot DOM šķērsošanas metodes, varat piekļūt HTML dokumentā lietotajām klasēm vai atlasītājiem un manipulēt ar vērtībām.

Pirms pogas noklikšķināšanas:

Pēc pogas noklikšķināšanas:

Varat arī izmantot JavaScript, lai izveidotu jaunus CSS mainīgos vai noņemtu tos pavisam.

Piemēram:

// Izveidot a jaunsmainīgs
dokumentu.documentElement.style.setProperty("--jauna-krāsa", 'zils');
// Noņemt mainīgo
dokumentu.documentElement.style.removeProperty("--jauna-krāsa");

CSS mainīgo izmantošana ar priekšprocesoriem

Mainīgo izmantošana frontend tehnoloģijā sākotnēji tika panākta ar tādiem CSS priekšprocesoriem kā SASS, LESS un Stylus.

CSS priekšapstrādātāju mērķis ir izstrādāt kodu, kas paplašina standarta CSS pamatiespējas. Pēc tam apkopojiet šo kodu standarta CSS formātā, lai pārlūkprogramma to saprastu, līdzīgi kā TypeScript darbojas ar JavaScript.

Attīstoties CSS mainīgajiem, priekšapstrādātāji vairs nav tik svarīgi, taču tie joprojām var piedāvāt zināmu pielietojumu, ja tie tiek apvienoti ar CSS mainīgajiem jūsu projektā.

Varat definēt SASS mainīgo $galvenā krāsa un izmantojiet to, lai iestatītu CSS mainīgā vērtību. Pēc tam izmantojiet CSS mainīgo parastā stila klasē.

Varat arī izmantot SASS funkcijas, lai manipulētu ar CSS mainīgo vērtībām.

Piemēram:

:root {
 --primary: $galvenā krāsa;
 --sekundārais: atvieglot(var(--primārs), 20%);
}
.btn {
 krāsa: var(--primārs);
 fona krāsa: var(--sekundārais);
}

Šeit ir SASS funkcija atvieglot () manipulē ar vērtību --primārs lai iegūtu vērtību -- sekundārais.

Ņemiet vērā, ka JavaScript nevar piekļūt SASS mainīgajiem. Tātad, ja izpildlaikā ir nepieciešams manipulēt ar mainīgo vērtībām, izmantojiet CSS mainīgos.

Izmantojot kopā CSS mainīgos un priekšapstrādātājus, varat izmantot abus ieguvumus, piemēram, izmantošanu jaudīgas priekšprocesora funkcijas, piemēram, cilpas un funkcijas, un CSS mainīgo funkciju, piemēram, CSS kaskādes.

Padomi CSS mainīgo izmantošanai tīmekļa izstrādē

Šeit ir daži svarīgi padomi, kas palīdzēs labāk izmantot CSS mainīgos.

Sāciet ar skaidru nosaukumu piešķiršanas konvenciju

Izvēlieties mainīgajiem nosaukšanas principu, kas padara tos viegli saprotamus un lietojamus. Piemēram, izmantojiet prefiksu, piemēram, -- krāsa- krāsu mainīgajiem vai --atstarpes- atstarpes mainīgajiem.

Izmantojiet mainīgos lielumus multivides vaicājumos, lai atvieglotu dizaina pielāgošanu dažādiem ekrāna izmēriem.

Izmantojiet CSS kaskādes īpašības

Atcerieties, ka CSS mainīgie ir kaskādes, kas nozīmē, ka, ja iestatāt mainīgo vecāku elementam, tas ietekmēs visus tā atvasinājumus.

Izmantojiet CSS mainīgos piesardzīgi

Pārāk daudzu CSS mainīgo izmantošana var radīt neskaidrības, tāpēc izmantojiet tos piesardzīgi un tikai tad, ja tas ir saprātīgi un uzlabo koda apkopi.

Pārbaudi savus mainīgos

CSS mainīgie ir unikāls veids, kā stila lapā ierakstīt skaidru un uzturējamu kodu.

Ir svarīgi atzīmēt, ka tie joprojām netiek pilnībā atbalstīti visās pārlūkprogrammās. Tāpēc jums ir jāpārbauda mainīgo saderība ar pārlūkprogrammu, lai nodrošinātu, ka tie darbojas, kā paredzēts, un vai visas atkāpšanās vērtības darbojas, kā jūs gaidāt.