Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

CSS kintamieji, dar vadinami tinkintomis ypatybėmis, padeda sumažinti pasikartojimą stiliaus lapuose. Tai savo ruožtu padeda sutaupyti laiko ir pastangų keičiant dizainą. Taip pat galite būti tikri, kad nepraleisite jokių verčių, kurias reikia atnaujinti.

Prieiga prie DOM leidžia kurti kintamuosius, juos saugoti ir pakartotinai naudoti visame stiliaus lape.

Kaip apibrėžti ir naudoti CSS kintamuosius

Jei norite, kad stiliaus lapai būtų labiau išdėstyti, prižiūrimi ir naudojami pakartotinai, galite naudoti CSS kintamuosius bet kurioje nuosavybėje, kuri priima vertę.

Paimkite šį HTML failo ir CSS failo, kuriame nenaudojami CSS kintamieji, pavyzdį.

HTML:

html>
<htmllang="en">
<galva>
<titulą>CSS kintamieji – mygtukų variantaititulą>
<nuorodarel="stiliaus lapas"href=„Kintamieji.css“ />
galva>
<kūnas>
<div>
<h1>CSS kintamiejih1>
<div>
instagram viewer

CSS:

.btn {
kamšalas: 1rem 1.5rem;
 fonas: skaidrus;
 šrifto svoris: 700;
 spalva: raudona;
}

Štai kaip turėtų atrodyti jūsų puslapis:

The .btn Klasė, naudojama aukščiau esančiame stiliaus lape, nėra dinamiška, todėl galite sukurti atskirą klasę, kad galėtumėte tinkinti atskirus mygtukus. Kurdami gražias svetaines, turite būti dinamiški priekinės dalies stilius. Tokiu būdu įdiegus mygtukus, šią užduotį bus sunku atlikti.

Kaip ir dauguma programavimo kalbų, turite inicijuoti ir pakeisti CSS kintamuosius.

Norėdami inicijuoti CSS kintamąjį, prieš kintamojo pavadinimą sudėkite dvigubus brūkšnelius:

:root{
/*CSS kintamasis*/
--kintamojo_pavadinimas: reikšmė;
}

Kintamąjį galite inicijuoti bet kur, tačiau atminkite, kad tą kintamąjį galėsite naudoti tik inicijuotajame parinkiklyje. Dėl šios priežasties CSS kintamieji paprastai inicijuojami šakniniame parinkiklyje. Tai taikoma aukščiausio lygio DOM elementui ir leidžia kintamuosius pasiekti visame HTML dokumente pasauliniu mastu.

Norėdami pakeisti kintamąjį į savo CSS stilių, naudosite var() nuosavybė:

:root {
/*CSS kintamasis*/
 --pagrindinis: #900c3f;
 --antrinis: #ff5733;
}
.btn {
kamšalas: 1rem 1.5rem;
 fonas: skaidrus;
 šrifto svoris: 700;
 spalva: var(--pirminis);
 fono spalva: var(--vidurinis);
}
.pagrindinis {
 spalva: var(--vidurinis);
 fono spalva: var(--pirminis);
}

Šakniniame parinkiklyje yra du kintamieji: --pagrindinis ir --antrinis. Tada abu kintamieji pakeičiami į .btn klasė atitinkamai kaip spalva ir fono spalva.

Naudodami kintamuosius galite daug lengviau formuoti atskirų elementų stilių. Pakartotinai naudodami kintamuosius galite greitai vieną kartą pakeisti reikšmę, kad ją atnaujintumėte kiekvienu atveju.

The var() nuosavybė taip pat gali būti antras argumentas. Šis argumentas veikia kaip pirmojo argumento atsarginė vertė, kai pirmasis nėra apibrėžtas arba yra negaliojantis.

Pavyzdžiui:

:root {
 --pagrindinis: #900c3f;
 --antrinis: #ff5733;
}
.btn {
kamšalas: 1rem 1.5rem;
 fonas: skaidrus;
 šrifto svoris: 700;
 spalva: var(--pirminis, mėlynas);
}

Šiame pavyzdyje pakeiskite --pagrindinis kintamasis į spalva stilius. Jei dėl kokios nors priežasties ši vertė nepavyksta, stiliaus lapas naudos antrąją vertę kaip atsarginę vertę. Taip pat galite naudoti kitą CSS kintamąjį kaip atsarginę vertę.

CSS kintamųjų manipuliavimas ir nepaisymas naudojant „JavaScript“.

Manipuliavimas CSS kintamaisiais naudojant „JavaScript“ gali būti veiksmingas būdas greitai pakeisti svetainės išvaizdą. Naudodami „JavaScript“ galite atnaujinti šių kintamųjų reikšmes ir matyti pakeitimus, kurie atsispindi jūsų svetainėje.

Svarbu pažymėti, kad pakeitimai, atlikti naudojant „JavaScript“, bus taikomi tik dabartinei sesijai. Turite atnaujinti pradinį šaltinį arba išsaugoti naują vertę kliente, kaip slapuke, kad pokyčiai išliktų.

Štai pavyzdys, kaip naudoti „JavaScript“ norint atnaujinti CSS kintamojo vertę.

HTML:

html>
<htmllang="en">
<galva>
<titulą>CSS kintamieji – mygtukų variantaititulą>
<nuorodarel="stiliaus lapas"href=„Kintamieji.css“ />
<scenarijus>
funkcijapakeisti Spalvą() {
// Gaukite elementą, kurio kintamąjį norite pakeisti
konst mano elementas = dokumentas.querySelector(":root");
// Gaukite dabartinę kintamojo reikšmę
leisti currentValue = getComputedStyle (mano elementas).getPropertyValue(
"--antrinis"
 );
 // Nustatyti į naujasvertėdėl į kintamasis
manoElementas.stilius.setProperty("--antrinis", "#DAF7A6");
 }
scenarijus>
galva>
<kūnas>
<div>
<h1>CSS kintamiejih1>
<div>

CSS:

:root {
 --pagrindinis: #900c3f;
 --antrinis: #ff5733;
}
.btn {
kamšalas: 1rem 1.5rem;
 fonas: skaidrus;
 šrifto svoris: 700;
}
.pagrindinis {
 spalva: var(--pirminis);
 fono spalva: var(--vidurinis);
}

Šiame „JavaScript“ kode „ pakeisti spalvą () funkcija atnaujina pirmojo mygtuko spalvą, kai vartotojas jį spusteli.

Naudojant DOM perėjimo metodai, galite pasiekti HTML dokumente taikomas klases ar parinkiklius ir valdyti reikšmes.

Prieš paspausdami mygtuką:

Paspaudę mygtuką:

Taip pat galite naudoti JavaScript norėdami sukurti naujus CSS kintamuosius arba juos visiškai pašalinti.

Pavyzdžiui:

// Sukurti a naujaskintamasis
dokumentas.documentElement.style.setProperty('--nauja-spalva', 'mėlyna');
// Pašalinkite kintamąjį
dokumentas.documentElement.style.removeProperty('--nauja-spalva');

CSS kintamųjų naudojimas su išankstiniais procesoriais

Kintamųjų naudojimas frontend technologijoje iš pradžių buvo pasiektas naudojant tokius CSS išankstinius procesorius kaip SASS, LESS ir rašiklis.

CSS pirminių procesorių tikslas yra sukurti kodą, kuris praplečia pagrindines standartinio CSS galimybes. Tada sukompiliuokite tą kodą į standartinį CSS, kad naršyklė suprastų, panašiai kaip kaip „TypeScript“ veikia su „JavaScript“..

Sukūrus CSS kintamuosius, išankstiniai procesoriai nebėra tokie svarbūs, tačiau jie vis tiek gali pasiūlyti naudos, jei jūsų projekte derinami su CSS kintamaisiais.

Galite apibrėžti SASS kintamąjį $pagrindinė spalva ir naudokite jį norėdami nustatyti CSS kintamojo reikšmę. Tada naudokite CSS kintamąjį įprastoje stiliaus klasėje.

Taip pat galite naudoti SASS funkcijas, kad galėtumėte manipuliuoti CSS kintamųjų reikšmėmis.

Pavyzdžiui:

:root {
 --pirminė: $pagrindinė spalva;
 --antrinis: pašviesinti(var(--pagrindinis), 20%);
}
.btn {
 spalva: var(--pirminis);
 fono spalva: var(--vidurinis);
}

Čia yra SASS funkcija pašviesinti () manipuliuoja verte --pagrindinis gauti vertę --antrinis.

Atminkite, kad SASS kintamieji nepasiekiami naudojant „JavaScript“. Taigi, jei jums reikia manipuliuoti kintamųjų reikšmėmis vykdymo metu, turėtumėte naudoti CSS kintamuosius.

Naudodami kartu CSS kintamuosius ir pirminius procesorius, galite pasinaudoti abiem privalumais, pvz., naudojimu galingos išankstinio procesoriaus funkcijos, pvz., kilpos ir funkcijos, ir CSS kintamieji, pvz., CSS kaskados.

Patarimai, kaip naudoti CSS kintamuosius žiniatinklio kūrime

Čia yra keletas svarbių patarimų, kurie padės geriau panaudoti CSS kintamuosius.

Pradėkite nuo aiškios pavadinimo konvencijos

Pasirinkite kintamųjų pavadinimų tvarką, kad būtų lengva juos suprasti ir naudoti. Pavyzdžiui, naudokite priešdėlį, pvz --spalva- spalvų kintamiesiems arba --tarpai- tarpų kintamiesiems.

Naudokite kintamuosius medijos užklausose, kad būtų lengva pritaikyti dizainą skirtingiems ekrano dydžiams.

Pasinaudokite pakopinio CSS pobūdžio pranašumais

Atminkite, kad CSS kintamieji yra pakopiniai, o tai reiškia, kad jei nustatysite kintamąjį pirminiame elemente, jis turės įtakos visiems jo antriniams elementams.

CSS kintamuosius naudokite atsargiai

Naudojant per daug CSS kintamųjų gali kilti painiavos, todėl naudokite juos atsargiai ir tik tada, kai tai prasminga ir pagerina kodo priežiūrą.

Išbandykite savo kintamuosius

CSS kintamieji yra unikalus būdas rašyti aiškų ir prižiūrimą kodą stiliaus lape.

Svarbu pažymėti, kad jie vis dar nėra visiškai palaikomi visose naršyklėse. Todėl turėtumėte patikrinti, ar kintamieji yra suderinami su naršykle, kad įsitikintumėte, jog jie veikia taip, kaip tikėtasi, ir ar visos atsarginės reikšmės veikia taip, kaip tikitės.