Beddelayaasha CSS (Custom Properties)

Sifooyinka Gaarka ah ee CSS (CSS Custom Properties), oo sidoo kale loo yaqaano isbeddelayaasha CSS (CSS Variables), waxay kuu sahlayaan inaad kaydiso qiimayaal CSS ah oo aad dib uga isticmaasho meelo badan [1]. Habkani wuxuu aad u fududeeyaa dayactirka koodka, theming (habaynta muuqaallada), iyo nidaamka guud ee naqshadaynta (design system). Haddii aad u baahan tehay inaad mar qura beddesho midabka rasmiga ah ee mareegtaada oo dhan — isbeddelayaasha CSS ayaa kuu ah xalka ugu habboon.

Sida loo Qeexo Isbeddelayaasha (Variables) — `--`

Isbeddelayaasha CSS waxay had iyo jeer ku bilowdaan laba xariiq oo is-raacsan (--):

:root {
  --midabka-as-aasiga: #2563eb;
  --midabka-dusha: #ffffff;
  --qoraalka-madow: #0f172a;
  --kala-fog: 16px;
}

Magaca Isbeddelaha: --midabka-as-aasiga
Qiimaha la siiyay: #2563eb
Xulaaga :root: Wuxuu u taagan yahay heerka guud (global scope) — taas oo ka dhigan in isbeddelayaasha ku dhex qoran laga heli karo meel kasta oo bogga ka mid ah.

Sida Loo Adeegsado — `var()`

Si aad u isticmaasho qiimihii aad kaydisay, waxaad u baahan tahay inaad u wacdo adoo adeegsanaya habka var():

.badhanka {
  background: var(--midabka-as-aasiga);
  color: var(--midabka-dusha);
  padding: var(--kala-fog);
}

Qiimaha Gurmadka ah (Fallback Value)

Habka var() wuxuu aqbali kartaa qiime gurmad ah (fallback), kaas oo la adeegsado haddii isbeddelaha asalka ah la heli waayo ama uu cilladoobo:

.badhanka {
  background: var(--midabka-maanta, #2563eb); /* fallback = #2563eb */
  color: var(--midabka-dusha, #ffffff);
}

Tani waxay aad u caawisaa marka aad adeegsanayso isbeddelayaal cusub oo laga yaabo in qaar ka mid ah bog-furayaashu (browsers) aysan wali si buuxda u taageerin.

Heerka Guud iyo Heerka Maxalliga ah (Global & Local Scope)

Isbeddelayaashu waxay leeyihiin xad-saameyn ama heer (scope) — si la mid ah sida ay ugu shaqeeyaan luuqadda JavaScript:

:root {
  --midab: #2563eb; /* Heerka guud (Global scope) */
}

.kaadhka-guurad { /* Heerka maxalliga ah (Local scope) */
  --midab: #16a34a; /* Wuxuu beddelayaa midabkii guud ee la qeexay (Override) */
}

.kaadhka-guurad .badhanka {
  background: var(--midab); /* Wuxuu qaadanayaa #16a34a */
}

Heerka (Scope)	Habka Loo Qoro	Goobta uu Saameeyo
Global	`:root { --x: y; }`	Gebi ahaanba bogga oo dhan
Local	`.qayb { --x: y; }`	Curiyahaas iyo carruurtiisa oo kaliya
Override	`.qayb { --x: z; }`	Wuxuu beddelaa qiimihii guud ee hore u jiray

Habaynta Muuqaalka Bogga (Theming — Light / Dark Mode)

Kani waa mid ka mid ah adeegsiyada ugu caansan uguna muhiimsan ee isbeddelayaasha CSS:

/* Light mode (caadiga ah) */
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --card: #f8fafc;
  --border: #e2e8f0;
}

/* Dark mode */
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #f1f5f9;
  --card: #1e293b;
  --border: #334155;
}

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

Koodka JavaScript wuxuu si toos ah u beddelayaa sifo-bixiyaha data-theme ee curiyaha xididka ah:

document.documentElement.setAttribute('data-theme', 'dark');

Nidaamka Calaamadaha Naqshadaynta (Design Token System)

Isbeddelayaasha CSS waxay aasaas u yihiin dhisidda nidaamka naqshadaynta (design system) ee mashaariicda waaweyn:

:root {
  /* Midabada — Color palette */
  --blue-50: #eff6ff;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --green-500: #22c55e;
  --red-500: #ef4444;

  /* Kala-fogaanshaha — Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Cabbirka font — Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-4xl: 2.25rem;
}

Isku-darka `calc()` iyo Isbeddelayaasha

Waxaad si dhib yar isbeddelayaasha ugu dhex adeegsan kartaa hab-xisaabeedka calc():

:root {
  --header-dherer: 64px;
  --gap: 16px;
}

.nuxurka {
  padding: calc(var(--gap) * 2);             /* 32px */
  min-height: calc(100vh - var(--header-dherer));
  width: calc(100% - var(--gap));
}

Tusaale	Natiijada la filayo
`calc(var(--gap) * 2)`	`32px`
`calc(100% - var(--sidebar))`	100% marka laga jaro ballaca baarka dhinaca
`calc(var(--text-base) + 4px)`	`1rem + 4px`

Wada-shaqaynta JavaScript iyo CSS

JavaScript waxay awood u leedahay inay akhriso ama si toos ah u beddesho qiimayaasha isbeddelayaasha CSS:

// Sida loo akhriyo qiimaha:
getComputedStyle(document.documentElement)
  .getPropertyValue('--midabka-as-aasiga');

// Sida loo beddelo qiimaha:
document.documentElement.style
  .setProperty('--midabka-as-aasiga', '#dc2626');

Arrintani waxay furaysaa fursado badan oo hal-abuur leh sida: beddelidda muuqaalka bogga (theme switcher), xafididda dookhyada isticmaalaha (user preferences), beddelidda koodka tooska ah (live editing), iyo kuwo kale oo badan.

Tusaale Mashruuc Dhamaystiran oo ku saabsan Theming-ka

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theming — Light / Dark Mode</title>
  <style>
    /* Calaamadaha Naqshadaynta (Design tokens) */
    :root {
      --midab-as-aasiga: #2563eb;
      --midab-as-aasiga-hover: #1d4ed8;
      --bg: #ffffff;
      --bg-bogga: #f8fafc;
      --qoraal: #0f172a;
      --qoraal-hoose: #64748b;
      --kaadh-bg: #ffffff;
      --xariiq: #e2e8f0;
      --ku-shaashad: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* Dark mode */
    [data-theme="dark"] {
      --midab-as-aasiga: #60a5fa;
      --midab-as-aasiga-hover: #93bbfc;
      --bg: #0f172a;
      --bg-bogga: #020617;
      --qoraal: #f1f5f9;
      --qoraal-hoose: #94a3b8;
      --kaadh-bg: #1e293b;
      --xariiq: #334155;
      --ku-shaashad: 0 2px 8px rgba(0,0,0,0.3);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: var(--bg-bogga);
      color: var(--qoraal);
      transition: background 0.3s, color 0.3s;
      padding: 40px 20px;
    }

    .weelka {
      max-width: 640px;
      margin: 0 auto;
    }

    /* Badhanka beddelka muuqaalka */
    .badhanka-theme {
      background: var(--kaadh-bg);
      border: 1px solid var(--xariiq);
      color: var(--qoraal);
      padding: 10px 20px;
      border-radius: 99px;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 24px;
      transition: all 0.2s;
    }
    .badhanka-theme:hover {
      border-color: var(--midab-as-aasiga);
    }

    /* Card */
    .kaadhka {
      background: var(--kaadh-bg);
      border-radius: 16px;
      border: 1px solid var(--xariiq);
      padding: 32px;
      box-shadow: var(--ku-shaashad);
      transition: all 0.3s;
      margin-bottom: 20px;
    }
    .kaadhka h1 {
      font-size: 1.5rem;
      margin-bottom: 8px;
    }
    .kaadhka p {
      color: var(--qoraal-hoose);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    /* Badhamada */
    .badhano {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .btn {
      padding: 10px 22px;
      border-radius: 99px;
      font-size: 0.875rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-primary {
      background: var(--midab-as-aasiga);
      color: white;
    }
    .btn-primary:hover {
      background: var(--midab-as-aasiga-hover);
    }
    .btn-secondary {
      background: transparent;
      border: 1px solid var(--xariiq);
      color: var(--qoraal);
    }
    .btn-secondary:hover {
      border-color: var(--midab-as-aasiga);
    }

    /* Swatches-ka midabada */
    .midabo {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .dheeh {
      width: 32px;
      height: 32px;
      border-radius: 99px;
      border: 2px solid var(--xariiq);
    }

    /* Jadwalka Calaamadaha (Design Tokens) */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }
    th, td {
      text-align: left;
      padding: 8px 12px;
      border-bottom: 1px solid var(--xariiq);
    }
    th {
      color: var(--qoraal-hoose);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
    }
    code {
      background: var(--bg-bogga);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8em;
    }
  </style>
</head>
<body>

<div class="weelka">
  <button class="badhanka-theme" onclick="beddelTheme()">↻ Beddel Theme</button>

  <div class="kaadhka">
    <h1>CSS Custom Properties</h1>
    <p>Kani waa tusaale muuqaal-beddele (theme switcher) ah oo adeegsanaya isbeddelayaasha CSS. Guji badhanka kore si aad u dhexgasho muuqaalka habeenka iyo maalinta (dark/light mode).</p>

    <div class="badhano">
      <button class="btn btn-primary">Ku Bilaab</button>
      <button class="btn btn-secondary">Sii Akhri</button>
    </div>
  </div>

  <div class="kaadhka">
    <h2>Midabyada Nidaamka Naqshadaynta</h2>
    <p>Kuwani waa midabyda rasmiga ah ee nidaamka naqshadaynta — oo dhammaantood ku kaydsan isbeddelayaasha CSS.</p>
    <div class="midabo">
      <div class="dheeh" style="background: var(--midab-as-aasiga);"></div>
      <div class="dheeh" style="background: #22c55e;"></div>
      <div class="dheeh" style="background: #ef4444;"></div>
      <div class="dheeh" style="background: #f59e0b;"></div>
      <div class="dheeh" style="background: #8b5cf6;"></div>
    </div>
  </div>

  <div class="kaadhka">
    <h2>Calaamadaha Naqshadaynta (Design Tokens)</h2>
    <table>
      <tr><th>Token</th><th>Qiimaha</th></tr>
      <tr><td><code>--midab-as-aasiga</code></td><td id="val-primary">#2563eb</td></tr>
      <tr><td><code>--bg</code></td><td id="val-bg">#ffffff</td></tr>
      <tr><td><code>--qoraal</code></td><td id="val-text">#0f172a</td></tr>
      <tr><td><code>--xariiq</code></td><td id="val-border">#e2e8f0</td></tr>
    </table>
  </div>
</div>

<script>
  let dark = false;

  function beddelTheme() {
    dark = !dark;
    if (dark) {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
    cusbooneysiiQiimaha();
  }

  function cusbooneysiiQiimaha() {
    const root = document.documentElement;
    const style = getComputedStyle(root);
    document.getElementById('val-primary').textContent =
      style.getPropertyValue('--midab-as-aasiga').trim();
    document.getElementById('val-bg').textContent =
      style.getPropertyValue('--bg').trim();
    document.getElementById('val-text').textContent =
      style.getPropertyValue('--qoraal').trim();
    document.getElementById('val-border').textContent =
      style.getPropertyValue('--xariiq').trim();
  }

  cusbooneysiiQiimaha();
</script>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Sida loo sameeyo Dhaqdhaqaaqa iyo Isbeddellada (Transitions & Animations) ee CSS.

Sida loo Qeexo Isbeddelayaasha (Variables) — --

Sida Loo Adeegsado — var()