# Globális változók kezelője

> Újrahasználható CSS-változók létrehozása, kategorizálása, átnevezése, szűrése, exportálása és importálása a Stíluskezelőben.

A Globális változók kezelőjében újrahasználható CSS-változókat (custom property) hozhatsz létre és tarthatsz karban. Olyan értékekhez érdemes változót használni, amelyeknek egységesnek kell maradniuk vezérlőkben, osztályokban, sablonokban és oldalakon: térközméretek, betűméretek, lekerekítések, elrendezési szélességek, színek, árnyékok vagy bármilyen ismétlődő tervezési érték.

Például ahelyett, hogy a `clamp(1rem, 2vw, 1.5rem)` értéket több vezérlőbe is beírnád, hozz létre egy `text-m` nevű változót, és mindenhol `var(--text-m)` értéket használj.

## A változókezelő megnyitása

Kattints a szerkesztő eszköztárán a **Stíluskezelő** ikonra, majd válaszd a **Változók** lapot. A **Kategóriák** oszlop a **Mind** és **Kategorizálatlan** mellett a saját kategóriáidat sorolja fel. A Színkezelő színpalettái is itt vannak, **SZÍNEK** jelvénnyel, mert minden palettaszín egyben CSS-változó is.

![A Stíluskezelő Változók lapja: Kategóriák (Mind, Kategorizálatlan, Sugár, Default), a Sugár kategória négy változója, alul az Új változónév és Érték mező](./kepek/stilusok-2-valtozokezelo.webp)

*A Stíluskezelő Változók lapja: Kategóriák (Mind, Kategorizálatlan, Sugár, Default), a Sugár kategória négy változója, alul az Új változónév és Érték mező* (https://minta-bolt.hu/home/?bricks=run)

A képen a **Sugár** kategória négy változója látszik névvel és értékkel; felül a keresés, a rendezés és a szűrés mezői.

A változókezelőt kikapcsolhatod: **Bricks → Beállítások → Általános → CSS-változók kezelőjének kikapcsolása**. A változóválasztóban az érték megjelenítését a **Bricks → Beállítások → Szerkesztő** részben rejtheted el (**Változó legördülő: érték elrejtése**).

## A változók működése

A globális változók a Bricks webhelyszintű adatai. Egy változónak van:

- belső azonosítója,
- neve, a kezdő `--` nélkül tárolva,
- értéke,
- opcionálisan kategóriája.

A weboldalon a Bricks `--` előtaggal CSS custom property-ként írja ki a változókat:

```css
:root {
  --text-m: clamp(1rem, 2vw, 1.5rem);
}
```

Vezérlőben vagy CSS-mezőben így hivatkozz rá:

```css
var(--text-m)
```

A Bricks csak azokat a változókat írja ki, amelyeknek van nevük és nem üres az értékük.

## Változó létrehozása

1. Nyisd meg a **Stíluskezelő → Változók** lapot.
2. Ha akarod, jelöld ki a kategóriát, amelybe a változó kerüljön. Az új változó a kijelölt kategóriába kerül. Új kategóriához írd a nevét az **Új kategória neve** mezőbe a lista alatt, és nyomj Entert: az új kategória azonnal kijelölődik.
3. Az **Új változónév** mezőbe írj nevet a kezdő `--` nélkül, például `space-m`. A `--` előtagot a Bricks teszi hozzá.
4. Az **Érték** mezőbe írd az értéket, például `clamp(1rem, 2vw, 2rem)`.
5. Nyomj Entert, vagy kattints a sor végén lévő mentés ikonra.
6. A Stíluskezelő eszköztárán kattints a **Mentés** gombra, hogy a változtatások elmentődjenek.

Ha olyan nevet illesztesz be, amely `--`-szal vagy `var(--...)` formában kezdődik, a Bricks a tárolt névvé alakítja. A változónevek egyediek lehetnek. A Bricks azt is megakadályozza, hogy a név ütközzön a Színkezelő változóalapú színeivel.

## Változók használata a vezérlőkben

Sok szerkesztővezérlőn van változóválasztó: a mező végén lévő kis CSS ikon. Nyisd meg, és válassz egy változót, hogy beszúrja az aktív vezérlőbe.

A választó keresőmezővel rendelkezik, és kategóriák szerint csoportosítja a változókat, a **Kategorizálatlan** és a színpaletták is megjelennek. Egy csoportot megnyitva látod a benne lévő változókat.

A választó `var(--név)` hivatkozást illeszt be. Ha egy vezérlő oldalai össze vannak kapcsolva (például a **Keret → Sugár** négy sarka), az egyik oldalra választott változó az összes kapcsolt oldalt beállítja. A `var(--név)` kézzel is beírható minden olyan vezérlőbe, amely CSS-értéket fogad.

A változók használhatók:

- elem azonosítós stílusokban,
- globális osztályok stílusaiban,
- sablonstílusokban,
- oldalbeállításokban,
- egyéni CSS-mezőkben,
- más, a Bricks által kezelt, CSS-értéket elfogadó stílusbeállításokban.

## Frissítés, átnevezés, duplikálás és törlés

Egy változóra kattintva kijelölöd: a neve és az értéke ekkor helyben szerkeszthető, a módosítás után nyomj Entert. Ugyanarra a sorra újra kattintva a kijelölés megszűnik.

Több változó kijelöléséhez kattints az elsőre, és `Shift` lenyomásával az utolsóra, vagy használd a lista fejlécében a mindent kijelölő jelölőnégyzetet. Több kijelölt változónál a lista mellett megnyílik a **Szerkesztés** panel három lappal:

- **Átnevezés**: a kijelölt változókat egyszerre nevezheted át a **Keresés**, **Csere erre**, **Előtag hozzáadása** vagy **Utótag hozzáadása** mezővel. Az **Előnézet** az **Átnevezés** gomb előtt megmutatja az új neveket.
- **Kategorizálás**: a kijelölt változókat áthelyezi egy kategóriába. Válaszd ki a kategóriát, és kattints a **Frissítés** gombra. A lap akkor jelenik meg, ha már van legalább egy kategória.
- **Duplikálás**: másolatot készít a kijelölt változókról.

A lista fejlécében ikonok is vannak a kijelölt változók exportálására, a kukába helyezésre és a kijelölés megszüntetésére. A változók sorrendjét húzással változtathatod.

![A Változók lap két kijelölt változóval: a Szerkesztés panel Átnevezés lapja a Keresés, Csere erre, Előtag hozzáadása és Utótag hozzáadása mezőkkel](./kepek/stilusok-2-valtozokezelo-szerkesztes.webp)

*A Változók lap két kijelölt változóval: a Szerkesztés panel Átnevezés lapja a Keresés, Csere erre, Előtag hozzáadása és Utótag hozzáadása mezőkkel* (https://minta-bolt.hu/home/?bricks=run)

A képen a `card-shadow` és a `card-shadow-hover` van kijelölve, a jobb oldali panelen az **Átnevezés** lap látszik az **Előnézet** résszel.

Változó átnevezésekor a Bricks a builder adataiban a `var(--régi-név)` hivatkozásokat `var(--új-név)` alakra frissíti. Ez a szerkesztőben és mentéskor is lefut.

## Kategóriák

A kategóriák csak a kezelőben és a választóban rendezik a változókat, a változó nevét önmagukban nem változtatják. Lehetőségeid:

- kategória létrehozása,
- átnevezése,
- átrendezése,
- a változók szűrése kategória szerint,
- a kategóriák exportálása a kijelölt változókkal.

Ha egy változónak nincs kategóriája, vagy a kategóriája már nem létezik, a Bricks kategorizálatlannak kezeli.

![A Változók lap a Mind kategóriával: a színpaletta változói színmintával és értékkel](./kepek/stilusok-2-valtozokezelo-ures.webp)

*A Változók lap a Mind kategóriával: a színpaletta változói színmintával és értékkel* (https://minta-bolt.hu/home/?bricks=run)

A képen a **Mind** kategória a **Default** színpaletta 18 változóját mutatja a színmintákkal; saját változó még nincs.

## Keresés, rendezés és használati szűrők

A kezelő fejlécében szűkítheted a listát:

- **Név (Bevonás)**: csak azokat a változókat mutatja, amelyeknek a nevében szerepel a beírt szöveg.
- **Név (Kizárás)**: elrejti azokat, amelyeknek a nevében szerepel a szöveg. Kombinálhatod a kettőt, például `shadow` bevonva és `hover` kizárva.
- **Rendezés**: ábécésorrendbe rendezi a listát.
- **Szűrés**: csak az **Ezen az oldalon használt** vagy **Ezen az oldalon nem használt** változókat mutatja. A kiválasztott szűrő címkeként jelenik meg a mezőben, a törlés ikonjával eltávolíthatod.

A használati szűrők a takarításban segítenek, de törlés előtt ellenőrizd az eredményt: egy változó lehet, hogy az aktuális oldalon nincs használatban, máshol viszont igen.

## Skálák és segédosztályok

A Stíluskezelő skálái változókategóriákat használnak: egy tipográfiai vagy térközskála olyan változókategória, amelyhez skálabeállítások tartoznak. Egy skála például ilyen változókat hozhat létre:

```text
text-xs, text-s, text-m, text-l, space-xs, space-s, space-m, space-l
```

A skálakategóriák segédosztály-mintákat is megadhatnak. Például:

```text
Osztálynév: text-*
CSS-tulajdonság: font-size
```

A `text-m` nevű változóhoz a Bricks ebből ezt az osztályt készítheti:

```css
.text-m {
  font-size: var(--text-m);
}
```

Ha az osztálymintában nincs `*`, a Bricks a skálalépés nevét fűzi a minta végére. A generált segédosztályok a Stíluskezelő CSS-kimenetének részei, és a szerkesztő előnézetében is megjelennek.

## CSS-kimenet

A nem üres értékű globális változók `:root` CSS custom property-ként kerülnek a kimenetbe.

A Bricks külön Stíluskezelő CSS-fájlt is generál, ha a Stíluskezelő releváns adatai megváltoznak. Ebben szerepelhet:

- a színpaletta-változók,
- a színek segédosztályai,
- a skálakategóriák változói,
- a skálakategóriákból generált segédosztályok.

Ha ez a fájl létezik, a Bricks betölti a weboldalon. Ha a fájl generálása fájljogosultság, gyorsítótár-beállítás vagy más környezeti probléma miatt nem sikerül, generáld újra a Bricks CSS-fájljait, és ellenőrizd a webhely fájljogosultságait.

## Változók exportálása és importálása

Exportálással és importálással ugyanazt a változókészletet több Bricks-webhelyen is használhatod.

### Exportálás

Két módja van:

1. **Összes exportálása**: kattints a kezelő tetején az exportálás gombra az összes változó és kategória exportálásához.
2. **Kijelöltek exportálása**: jelölj ki egy vagy több változót, és kattints a változók oszlopában a kijelöltek exportálása ikonra. A kijelöltek exportja a használt kategóriákat is tartalmazza.

### Importálás

Háromféleképpen importálhatsz:

- **JSON-fájllal**: az importálási ablakba húzd be az exportált változókat tartalmazó JSON-fájlt. A Bricks azokat a változókat adja hozzá, amelyek név szerint még nem léteznek. Ha a fájl kategóriákat is tartalmaz, azokat is importálhatja, amelyek név szerint még nincsenek meg.
- **Kézi szövegbevitel**: a változókat beírhatod egy szövegmezőbe. Ez gyors módja annak, hogy gyermektémából, saját bővítményből, stíluslapról vagy kódrészletből áthozd őket. A formátum pontosvesszővel elválasztott CSS-változódefiníciók listája:

  ```css
  --bricks-color-primary: #ffd64f;
  --bricks-color-secondary: #fc5778;
  --bricks-text-dark: #212121;
  ```

  A kézi importálás szintén csak a név szerint még nem létező változókat adja hozzá.
- **Távoli sablonból**: távoli sablon beszúrásakor a Bricks felkínálhatja a változók importálását a távoli forrásból. A változókat név szerint párosítja, az újakat importálhatja, a már létező, azonos nevű helyi változókat nem duplikálja. A távoli sablon változókategóriái nem importálódnak, ezért az importált változók kategorizálatlanul jelenhetnek meg.

## Jó gyakorlatok

- A változókat cél szerint nevezd el: `space-m`, `radius-card`, `text-step-2`.
- Ismétlődő értékekhez használj változót, ne minden egyszeri értékhez.
- Az érték legyen érvényes CSS abban a vezérlőben, ahol használni fogod.
- Tipográfiai és térközrendszerekhez a skálából generált változókat részesítsd előnyben.
- Éles webhelyen, sok egyéni CSS mellett ne nevezz át változókat gondatlanul.
- Nagyobb változómódosítás után generáld újra a Bricks CSS-fájljait, és nézd át a fontos sablonokat.

## Hibaelhárítás

**A változó nem jelenik meg a választóban.** Ellenőrizd, hogy a változó létezik-e, érvényes-e a neve, és hogy az adott vezérlő támogatja-e a változó beszúrását.

**A változó létezik, de nem ír ki CSS-t.** Nézd meg, van-e értéke: a Bricks kihagyja az üres értékű változókat.

**Átnevezés után a változó régi neve még megvan az egyéni CSS-ben.** A Bricks a saját kezelésű `var(--régi-név)` hivatkozásokat frissíti. A külső stíluslapokat, a gyermektéma CSS-ét, a saját bővítmények CSS-ét és a Bricksen kívüli kézi kódot magadnak kell átírnod.

**Az importált változók kategorizálatlanok.** A távoli sablonokból történő importálás nem hozza át a kategóriákat. A JSON-importálás átviheti őket, ha a fájl tartalmaz kategóriákat, és jóváhagyod a kategóriák importálását.

**Hiányoznak a segédosztályok.** Ellenőrizd, hogy a változókategória skála-e, be vannak-e állítva a skálához a segédosztályok, és hogy a Bricks létre tudja-e hozni és be tudja-e tölteni a Stíluskezelő CSS-fájlját.