Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Premenné CSS, známe aj ako vlastné vlastnosti, vám pomôžu minimalizovať opakovanie vo vašich štýloch. To vám zase pomáha ušetriť čas a námahu pri vykonávaní zmien vo vašom dizajne. Môžete si byť tiež istí, že vám neuniknú žiadne hodnoty, ktoré potrebujete aktualizovať.

Prístup k DOM vám umožňuje vytvárať premenné, ukladať ich a opätovne ich používať v rámci vašej šablóny štýlov.

Ako definovať a používať premenné CSS

Ak chcete, aby boli vaše predlohy štýlov lepšie usporiadané, udržiavateľné a opakovane použiteľné, môžete použiť premenné CSS v akejkoľvek vlastnosti, ktorá akceptuje hodnotu.

Vezmite si nasledujúci príklad súboru HTML a súboru CSS, ktorý nepoužíva premenné CSS.

HTML:

html>
<htmllang="sk">
<hlavu>
<titul>Premenné CSS – Variácie tlačidieltitul>
<odkazrel="štýlov"href="Premenné.css" />
hlavu>
<telo>
<div>
<h1>Premenné CSSh1>
<div>
instagram viewer

CSS:

.btn {
vypchávka: 1rem 1.5rem;
 pozadie: priehľadné;
 váha písma: 700;
 farba: červená;
}

Takto by mala vyzerať vaša stránka:

The .btn trieda použitá vo vyššie uvedenom hárku štýlov nie je dynamická a spôsobuje vytvorenie samostatnej triedy na prispôsobenie jednotlivých tlačidiel. Vytváranie krásnych webových stránok vyžaduje, aby ste boli dynamickí vo svojom front-end štýle. Implementácia tlačidiel týmto spôsobom jednoducho sťaží splnenie tejto úlohy.

Ako väčšina programovacích jazykov, musíte inicializovať a nahradiť premenné CSS.

Ak chcete inicializovať premennú CSS, pred názov premennej pridajte dvojité pomlčky:

:koreň{
/*Premenná CSS*/
--názov_premennej: hodnota;
}

Premennú môžete inicializovať kdekoľvek, ale uvedomte si, že túto premennú budete môcť použiť iba v inicializovanom selektore. Z tohto dôvodu sa premenné CSS konvenčne inicializujú v koreňovom selektore. Toto sa zameriava na prvok DOM najvyššej úrovne a umožňuje, aby boli premenné prístupné pre celý dokument HTML v globálnom meradle.

Ak chcete nahradiť premennú do svojho štýlu CSS, použijete var() nehnuteľnosť:

:koreň {
/*Premenná CSS*/
 --primárny: #900c3f;
 --sekundárne: #ff5733;
}
.btn {
vypchávka: 1rem 1.5rem;
 pozadie: priehľadné;
 váha písma: 700;
 farba: var(--primárny);
 farba pozadia: var(--sekundárne);
}
.sub-primárne {
 farba: var(--sekundárne);
 farba pozadia: var(--primárny);
}

Koreňový selektor obsahuje dve premenné: --primárny a -- sekundárne. Obe premenné sú potom nahradené do .btn triedu ako farbu a farbu pozadia.

Pomocou premenných môžete oveľa jednoduchšie štylizovať jednotlivé prvky. Opätovným použitím premenných môžete rýchlo zmeniť hodnotu raz a aktualizovať ju v každom prípade.

The var() vlastnosť môže mať aj druhý argument. Tento argument funguje ako záložná hodnota pre prvý argument v situácii, keď prvý nie je definovaný alebo je neplatný.

Napríklad:

:koreň {
 --primárny: #900c3f;
 --sekundárne: #ff5733;
}
.btn {
vypchávka: 1rem 1.5rem;
 pozadie: priehľadné;
 váha písma: 700;
 farba: var(--primárna, modrá);
}

V tomto príklade nahraďte --primárny variabilný do farba štýl. Ak z nejakého dôvodu táto hodnota zlyhá, šablóna štýlov použije druhú hodnotu ako záložnú. Ako záložnú hodnotu môžete použiť aj inú premennú CSS.

Manipulácia a prepisovanie premenných CSS pomocou JavaScriptu

Manipulácia s premennými CSS pomocou JavaScriptu môže byť účinným spôsobom, ako zmeniť vzhľad a dojem z vašich webových stránok za behu. Pomocou JavaScriptu môžete aktualizovať hodnoty týchto premenných a vidieť zmeny, ktoré sa prejavia na vašej lokalite.

Je dôležité poznamenať, že zmeny vykonané pomocou JavaScriptu sa budú vzťahovať iba na aktuálnu reláciu. Musíte buď aktualizovať pôvodný zdroj, resp uložiť novú hodnotu na klienta, ako v súbore cookie, aby zmeny pretrvávali.

Tu je príklad, ako použiť JavaScript na aktualizáciu hodnoty premennej CSS.

HTML:

html>
<htmllang="sk">
<hlavu>
<titul>Premenné CSS – Variácie tlačidieltitul>
<odkazrel="štýlov"href="Premenné.css" />
<skript>
funkciuzmeniť farbu() {
// Získajte prvok, na ktorom chcete zmeniť premennú
konšt myElement = dokument.querySelector(":root");
// Získanie aktuálnej hodnoty premennej
nech currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundárny"
 );
 // Set a Novýhodnotupre a premenlivý
myElement.štýl.setProperty("-- sekundárne", "#DAF7A6");
 }
skript>
hlavu>
<telo>
<div>
<h1>Premenné CSSh1>
<div>

CSS:

:koreň {
 --primárny: #900c3f;
 --sekundárne: #ff5733;
}
.btn {
vypchávka: 1rem 1.5rem;
 pozadie: priehľadné;
 váha písma: 700;
}
.sub-primárne {
 farba: var(--primárny);
 farba pozadia: var(--sekundárne);
}

V tomto kóde JavaScript je changeColor() funkcia aktualizuje farbu prvého tlačidla, keď naň používateľ klikne.

Použitím Metódy prechodu DOM, môžete pristupovať k triedam alebo selektorom použitým vo vašom dokumente HTML a manipulovať s hodnotami.

Pred kliknutím na tlačidlo:

Po kliknutí na tlačidlo:

Môžete tiež použiť JavaScript na vytvorenie nových premenných CSS alebo ich úplne odstrániť.

Napríklad:

// Vytvorte a Novýpremenlivý
dokument.documentElement.style.setProperty('--new-color', 'Modrá');
// Odstránenie premennej
dokument.documentElement.style.removeProperty('--new-color');

Používanie premenných CSS s preprocesormi

Používanie premenných v rámci technológie frontendu sa spočiatku dosahovalo pomocou predprocesorov CSS, ako sú SASS, LESS a Stylus.

Účelom preprocesorov CSS je vyvinúť kód, ktorý rozširuje základné možnosti štandardného CSS. Potom nechajte tento kód skompilovať do štandardného CSS, aby mu prehliadač rozumel, podobne ako ako TypeScript funguje s JavaScriptom.

S vývojom premenných CSS už preprocesory nie sú také dôležité, ale stále môžu ponúknuť určité využitie, ak sa skombinujú s premennými CSS vo vašom projekte.

Môžete definovať premennú SASS $hlavná farba a použite ho na nastavenie hodnoty premennej CSS. Potom použite premennú CSS v bežnej triede štýlu.

Na manipuláciu s hodnotami premenných CSS môžete použiť aj funkcie SASS.

Napríklad:

:koreň {
 --primary: $main-color;
 --sekundárne: zosvetliť(var(--primárny), 20%);
}
.btn {
 farba: var(--primárny);
 farba pozadia: var(--sekundárne);
}

Tu je funkcia SASS zosvetliť() manipuluje s hodnotou --primárny získať hodnotu pre -- sekundárne.

Upozorňujeme, že premenné SASS nie sú prístupné pre JavaScript. Ak teda potrebujete manipulovať s hodnotami svojich premenných za behu, mali by ste použiť premenné CSS.

Spoločným použitím premenných CSS a preprocesorov môžete využiť obe výhody, napríklad používanie výkonné funkcie preprocesora, ako sú slučky a funkcie, a funkcie premenných CSS, ako je CSS kaskádové.

Tipy na používanie premenných CSS pri vývoji webu

Tu je niekoľko dôležitých tipov, ktoré vám pomôžu lepšie využívať premenné CSS.

Začnite s jasnou konvenciou pomenovania

Vyberte konvenciu pomenovania svojich premenných, aby boli ľahko zrozumiteľné a použiteľné. Napríklad použite predponu ako napr --farba- pre farebné premenné resp --medzery- pre medzerové premenné.

Použite premenné v mediálnych dopytoch, aby ste uľahčili úpravu dizajnu pre rôzne veľkosti obrazovky.

Využite kaskádový charakter CSS

Pamätajte, že premenné CSS sú kaskádové, čo znamená, že ak nastavíte premennú na nadradený prvok, ovplyvní to všetky jeho potomky.

Premenné CSS používajte opatrne

Používanie príliš veľkého množstva premenných CSS môže spôsobiť zmätok, preto ich používajte opatrne a iba vtedy, keď to dáva zmysel a zlepšuje udržiavateľnosť kódu.

Otestujte svoje premenné

Premenné CSS predstavujú jedinečný spôsob, ako napísať jasný a udržiavateľný kód v rámci šablóny štýlov.

Je dôležité poznamenať, že stále nie sú plne podporované vo všetkých prehliadačoch. Preto by ste mali otestovať kompatibilitu svojich premenných s prehliadačom, aby ste sa uistili, že fungujú podľa očakávania a že všetky záložné hodnoty fungujú tak, ako očakávate.