Beddelayaasha CSS

Casharkaan, waxaan baran doonaa beddelayaasha CSS (CSS Custom Properties / CSS Variables). Kuwani waxay kuu ogolaanayaan inaad kaydiso qiimayaal dib loo isticmaali karo, taas oo ka dhigaysa code-kaaga mid nadiif ah oo la fahmi karo.

1. Waa maxay CSS Variables?

CSS variables (loo yaqaan “custom properties”) waa qiimayaal aad ku kaydiso magacyo, ka dibna aad dib u isticmaali karto meelo kale oo CSS-ka ah. Tani waxay kaa caawisaa inaad ilaaliso joogtaynta (consistency).

2. Sida loo Abuuro CSS Variable

CSS variables waxaa lagu dhawaaqaa (declare) iyada oo la isticmaalayo laba calaamadood (--):

:root {
    --color-signal: #00d97e;
    --color-ink: #0a0a0a;
    --color-cream: #faf8f4;
    --font-body: 'DM Sans', sans-serif;
    --spacing-md: 16px;
}

:root waa selector-ka guud (global) — variable-yada halkan ku qoran waxaa heli kara dhammaan curiyayaasha.

3. Sida loo Isticmaalo CSS Variable

Si aad u isticmaasho variable, isticmaal var():

.button {
    background-color: var(--color-signal);
    color: var(--color-ink);
    font-family: var(--font-body);
    padding: var(--spacing-md);
}

4. Qiimaha Gur (Fallback Value)

Waxaad siin kartaa variable-ka qiime gur ah (fallback) haddii uu jiro:

.box {
    color: var(--color-primary, #333); /* #333 waa fallback */
}

5. Variable-yada Gudaha (Local Scope)

Variable-yadu waxay yeelan karaan heer goob (local scope) — kaliya waxay ku shaqeeyaan gudaha selector-ka lagu dhawaaqay:

.card {
    --card-radius: 12px;
    border-radius: var(--card-radius);
}

.article {
    /* var(--card-radius) kuma shaqeeyo halkan */
}

6. Wax-ka-beddelka JavaScript-ka

CSS variables waxaa lagu beddeli karaa JavaScript si firfircoon (dynamic):

document.documentElement.style.setProperty('--color-signal', '#7c3aed');

7. Faa’iidooyinka CSS Variables

1. Dib-u-isticmaalka: Hal mar ku qeex, meelo badan ku isticmaal.
2. Joogtaynta: Midabada iyo cabbirrada way isku mid noqdaan.
3. Daymode (Themes): Si fudud u beddel midabada guud (dark mode/light mode).
4. JavaScript: Si firfircoon u xakamee qiimayaasha.

8. Tusaale: Dark Mode

:root {
    --bg: #ffffff;
    --text: #0a0a0a;
}

[data-theme="dark"] {
    --bg: #0a0a0a;
    --text: #ffffff;
}

body {
    background: var(--bg);
    color: var(--text);
}

Layli (Practice)

1. Abuur 3 CSS variables gudaha :root: --color-primary (buluug), --spacing (20px), --radius (8px).
2. Isticmaal variable-yadaas dhowr curiye oo kala duwan.
3. Abuur variable maxalli ah (local) gudaha hal selector.
4. Tijaabi inaad ku beddesho variable JavaScript-ka (console-ka browser-ka).

Sii wadashada: Casharka xigta (ugudambeeynta), waxaan dhisaynaa mashruuc dhamaystiran oo CSS ah!