CSS - SOMO LA 24: CSS Variables (Custom Properties)

? Utangulizi

CSS Variables ni njia ya kuhifadhi thamani ambazo zinaweza kutumika mara nyingi katika faili la CSS kwa njia rahisi na inayoruhusu kubadilika kwa haraka bila kuandika tena thamani hizo sehemu nyingi. Hii huifanya kazi na miradi mikubwa kuwa rahisi kusimamia na kurekebisha.

? Maudhui ya Somo

✅ 1. Kuunda CSS Variable

CSS Variables huanzishwa kwa kuandika jina la variable kuanzia na -- ndani ya selector (kawaida ndani ya :root ili ziwe globally accessible).

:root {
  --main-color: #333;
  --font-size: 16px;
}

✅ 2. Kutumia CSS Variable

Kutumia variable hufanywa kwa kutumia var() function.

body {
  color: var(--main-color);
  font-size: var(--font-size);
}

✅ 3. Faida za CSS Variables

• Kurahisisha mabadiliko: Badilisha thamani mahali moja, inabadilisha kila sehemu inayotumia variable hiyo.

• Kurudia-rudia: Epuka kuandika rangi au ukubwa mara nyingi.

• Dynamic: Variables zinaweza kubadilishwa hata kupitia JavaScript.

• Inasaidia theming: Rahisi kubadilisha mitindo kwa mandhari tofauti.

✅ 4. Mfano wa Kuongeza Variable na Kutumia

:root {
  --primary-bg: #005f73;
  --secondary-bg: #0a9396;
  --text-color: #94d2bd;
}

header {
  background-color: var(--primary-bg);
  color: var(--text-color);
  padding: 20px;
}

button {
  background-color: var(--secondary-bg);
  color: white;
  border: none;
  padding: 10px 20px;
}

✅ 5. Kutumia Variables na Thamani za Default

Unaweza pia kuweka thamani mbadala ukipotosha thamani ya variable.

p {
  color: var(--non-existent-color, black);
}

Hii inafanya p kuwa na rangi black ikiwa --non-existent-color haipo.

✅ Hitimisho

CSS Variables ni zana muhimu sana kwa kuboresha usimamizi wa mitindo na kuwezesha ufanisi wa marekebisho kwenye miradi mikubwa ya CSS. Kutumia variables huongeza flexibility na kufanya code yako kuwa safi zaidi.

? Somo Linalofuata: SOMO LA 25 - CSS Box Model

Tutajifunza kuhusu model ya kisanduku ya CSS, ambayo ni msingi wa kupanga na kuweka vipengele kwenye ukurasa.

? Maswali ya Kujitathmini

1. CSS variable huanzishwa na nini mwanzoni mwa jina lake?
   a) @
   b) --
   c) $
   d) #

2. Jinsi gani unavyotumia variable katika CSS?
   a) var[]
   b) var()
   c) variable()
   d) use()

3. Variable zinazozikwa katika selector gani mara nyingi hufanya ziwe globally accessible?
   a) body
   b) .class
   c) :root
   d) #id

4. Unawezaje kuweka thamani mbadala katika var()?
   a) Kwa kuweka thamani ya default kama parameter ya pili
   b) Kwa kuandika variable mara mbili
   c) Haiwezi kuweka thamani mbadala
   d) Kwa kutumia default() function

5. Nini faida kuu ya kutumia CSS variables?
   a) Kuongeza ukubwa wa faili la CSS
   b) Kurahisisha marekebisho na usimamizi wa mitindo
   c) Kubadilisha mitindo moja kwa moja tu kwenye HTML
   d) Kutengeneza picha za CSS