Menene Custom Properties na CSS (Masu Canji)?

Question

IT Interview Practice · Accepted Answer

**Custom Properties na CSS** (Masu Canji) suna ba ka damar adana ƙima sau ɗaya kuma gida su sake amfani. Ba kamar masu canji na preprocessor (Sass) ba, suna **raye a lokacin aiki** — suna aiki da cascade, sun gida, kuma ana iya canza su tare da JavaScript ko queries na yaduwar.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Ƙimar fallback

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Suna aiki da cascade kuma ana iya tsara su/share su

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Domin suna gida, mai canji da aka saita akan uwa yana samuwa ga duk jajajiya kuma ana iya share shi akan ƴan bishiya — wani abin da masu canji na Sass (waɗanda aka bugi) ba za su iya yi ba.

## Sifar da ke buge: jituwa lokacin aiki

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Canza jiya duka ta hanyar sake bayyana masu canji kaɗan — babu ƙokonnin da aka maimaita. Kuna iya yi shi a JS kuma:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Dan nan nan yana sabunta kowane kulemiya da ke amfani da mai canji na nan — ba zai yiwu tare da masu canji na Sass da aka bugi ba.

## Me ya sa ya matuwa

Masu canji na CSS shine tushen zamani **jitawa da alamomin ƙira**: bayyana launuka/ƴan fili sau daya, sake amfani dukudu, kuma canza jitawa (duhu yau, bambance-bambancen tauraruwa) a lokacin aiki ta hanyar queries na yaduwar ko JavaScript.

Suna kawo da DRY, ƙima na raye ga CSS mai tsafta — babu mataki na gina da ake buƙata.

Ƙimar fallback

Suna aiki da cascade kuma ana iya tsara su/share su

Sifar da ke buge: jituwa lokacin aiki

Me ya sa ya matuwa

Tambayoyi masu alaƙa