Ebben a cikkben röviden bemutatom nektek a CSS3 változók használatát, amelyek megkönnyíthetik a dolgotokat.

 

Valljuk be, elég idegesítő tud lenni ha CSS-ben másolnunk kell egy adott kód részletet egy másik class-ra, és így érhetjük el a kívánt kinézetet. Ez azonban a változók bevezetésével jelentősen megváltozott, hiszen most már definiálhatunk egy változót, amelynek megadhatjuk a használni kívánt értéket. Nézzünk egy egyszerű példát:

:root {
  --color: red;
}
h2 {
  color: var(--color);
}

Ahogy láthatjátok –color változónak red értéket állítottunk be, ami azt jelenti hogy a h2 elem használatakor, ezen elemek vörös színnel fognak megjelenni. A használata akkor nagyon célszerű, ha egy adott színt többször szeretnénk használni az oldalon belül, így amint változtatni kell a színen, azt ennek a változónak az átírásával eszközölhetjük.

 

Azonban a változók felül definiálása is lehetséges, erre nézzük az alábbi példát:

:root {
  --color: red;
}
body {
  --color: orange;
}
h2 {
  color: var(--color);
}

A –color változó ebben az esetben is red értéket kap, azonban a body segítségével ezt az értéket átállítjuk orange értékre.
Így a h2 mivel hogy a body egyik child elementje, ezért narancssárga színben fog megjelenni.

Használjunk blokkokat!

Könnyíthetünk még a dolgunkon, ha úgy nevezett “blokkokat” alkalmazunk. A példa kedvéért vegyünk egy gombot, amelynek kinézetét több helyen is alkalmaznunk kell, viszont néhány helyen szükségesek kisebb módosítások is. Ekkor azt tehetjük, hogy definiálunk egy változót, azonban a korábbitól eltérően itt nem egy színt fogunk neki megadni, hanem több tulajdonságot is.

button {
    display: block;
    margin: 10px;
    @apply --button-style;
}

:root {
    --button-style: {
        width: 300px;
        padding: 30px 20px;
        border-radius: 5px;
        background: blue;
        color: #fff;
        font-size: 54px;
        text-transform: uppercase;
    }
}

 

Ahogy láthatjátok a –button-style változónak megadtuk a tulajdonságokat és a @apply segítségével alkalmaztuk is a button elementre. Így a –button-style-ban megadott tulajdonságok most már vonatkozni fognak az összes button elemre az oldalunkon.

Egy válasz

Válaszolj

Az e-mail címed nem publikáljuk.