Változók használata a CSS-ben és a stílus egyszerűsítése

A legtöbb webhely CSS-t használ a megjelenés és a különböző weboldal-összetevők stílusának csiszolására. A CSS vagy a Cascading Style Sheet technikailag nem programozási nyelv. A CSS azonban használható olyan programozási nyelvekkel, mint a JavaScript, reszponzív és interaktív weboldalak létrehozására.

Ha már használt programozási nyelveket, például a JavaScriptet, akkor tudja, hogy deklarálhat egy változót, értéket rendelhet hozzá, és újra felhasználhatja a kód különböző részeiben. A jó hír az, hogy ugyanezt a koncepciót alkalmazhatja a CSS-ben.

Ez a cikk meghatározza a CSS-változókat, leírja előnyeiket, és bemutatja, hogyan deklarálhat és használjon változókat a CSS-ben.

Mik azok a változók a CSS-ben?

A CSS-változók olyan egyéni tulajdonságok, amelyek lehetővé teszik a webfejlesztők számára, hogy olyan értékeket tároljanak, amelyeket újra felhasználhatnak a stíluslapon keresztül. Például deklarálhatja a betűstílust, a háttérszínt és a betűméretet, amelyet újra felhasználhat olyan elemekkel, mint a címsorok, bekezdések és divek a kódbázisában.

Miért érdemes CSS-változókat használni? Ez néhány ok;

• Könnyebbé teszi a kód frissítését: Miután deklarált egy változót, újra felhasználhatja a teljes stíluslapot anélkül, hogy minden elemet manuálisan frissítene.
• Csökkenti az ismétlést: Ahogy a kódbázisod növekszik, azt fogod látni, hogy hasonló osztályaid és elemeid vannak. Ahelyett, hogy minden elemhez CSS-kódot írna, egyszerűen használhat CSS-változókat.
• Karbantarthatóbbá teszi a kódot: A kód karbantartása fontos, ha azt szeretné, hogy vállalkozása működőképes legyen.
• Javítja az olvashatóságot: A modern világ ösztönzi az együttműködést. A változók használata a CSS-ben egy kompakt kódbázist eredményez, amely olvasható.
• Könnyen fenntartható a konzisztencia: A CSS-változók segítségével konzisztens stílust tarthat fenn a forráskód növekedése vagy az alkalmazásméret növekedése során. Például deklarálhatja a margókat, a kitöltést, a betűstílust és a gombok színeit a webhelyen.

Hogyan deklaráljunk változókat a CSS-ben

Mivel tisztában van azzal, hogy mik a változók a CSS-ben, és miért érdemes őket használni, továbbmehetünk és bemutathatjuk, hogyan deklaráljuk őket.

Egy CSS-változó deklarálásához kezdje az elem nevével, majd írjon be két kötőjelet (–), a kívánt nevet és értéket. Az alapvető szintaxis:

element {

--variable-name: value;

}

Például, ha kitöltést szeretne alkalmazni a teljes dokumentumban, deklarálhatja a következőként;

body { 

--padding: 1rem;

}

Változók köre a CSS-ben

A CSS-változók hatóköre lehet lokálisan (egy adott elemen belül elérhető) vagy globálisan (a teljes stíluslapon elérhető).

Lokális változók

A helyi változók hozzáadódnak az adott szelektorokhoz. Például hozzáadhatja őket egy gombhoz. Ez egy példa;

.button {

    --button-bg-color: #33ff4e;

  }

A háttérszín változó a gombválasztón és annak gyermekein érhető el.

Globális változók

A deklarálás után globális változókat használhat a kód bármely eleméhez. A :root pszeudoosztályt használjuk a globális változók deklarálására. Így deklaráljuk őket;

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

A fenti kódban a különböző elemekkel deklarált változók bármelyikét használhatjuk, például címsorokat, bekezdéseket, diveket vagy akár a teljes törzset.

A változók használata a CSS-ben

Demonstrációs céllal létrehozunk egy projektet, és hozzáadunk index.html és styles.css fájlokat.

Az index.html fájlban lehet egy egyszerű div két címsorral (h1 és h2) és egy bekezdéssel (p).

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

A style.css fájlban a következők lehetnek;

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

A weboldal megjelenítésekor a következők lesznek:

A fenti kódból globális változókat deklaráltunk a :root elemben. A var kulcsszót kell használnunk a globális változó használatához bármely elemünkben. Például a globális változóként deklarált háttérszín alkalmazásához a kódunkat a következőképpen mutatjuk be;

háttérszín: var(–elsődleges szín);

Ellenőrizze az összes többi elemet, és észreveszi a var kulcsszó alkalmazásának trendjét.

CSS-változók használata JavaScripttel

Helyi és globális változókat fogunk használni a CSS-változók JavaScript használatával való használatának szemléltetésére.

Meglévő kódunkhoz hozzáadhatunk egy figyelmeztető elemet;

Új index.html dokumentumunk a következő lesz;

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

A változónkat stílusozhatjuk. Adja hozzá a következő kódot meglévő CSS-kódjához;

.alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

A következőket tettük;

• Meghatározott egy helyi változót a figyelmeztető elemen belül;

–bg-szín: piros

• A var kulcsszót használta a helyi változó eléréséhez;

háttérszín: var(–bg-color);

• A korábban deklarált globális változót használtuk font-súlyunkként;

font-weight: var(–font-weight);

Adjon hozzá JavaScript kódot

A riasztási elemünket érzékenyvé tehetjük; ha rákattint, egy felugró ablak jelenik meg a böngészőben, amely azt mondja: „CSS-változókat használtunk JavaScripttel!!!!”.

A JavaScript kódot közvetlenül hozzáadhatjuk a HTML kódhoz, ha azt