CSS custom properties (ਵੇਰੀਏਬਲ) ਕੀ ਹਨ?

Question

Accepted Answer

**CSS custom properties** (ਵੇਰੀਏਬਲ) ਤੁਹਾਨੂੰ ਇੱਕ ਵਾਰ ਮੂਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਵਰਤਣ ਦਿੰਦੇ ਹਨ। Preprocessor (Sass) ਵੇਰੀਏਬਲਾਂ ਦੇ ਉਲਟ, ਉਹ **runtime ਵਿੱਚ ਲਾਇਵ** ਹੁੰਦੇ ਹਨ — ਉਹ cascade ਹੁੰਦੇ ਹਨ, inherit ਕਰਦੇ ਹਨ, ਅਤੇ JavaScript ਜਾਂ media queries ਨਾਲ ਤਬਦੀਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।

```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);
}
```

## Fallback values

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

## ਉਹ cascade ਹੁੰਦੇ ਹਨ ਅਤੇ scoped/overridden ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ

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

ਕਿਉਂਕਿ ਉਹ inherit ਕਰਦੇ ਹਨ, ਇੱਕ parent ਉੱਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਵੇਰੀਏਬਲ ਸਾਰੇ descendants ਲਈ ਉਪਲਬਧ ਹੈ ਅਤੇ subtree ਉੱਤੇ override ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ — ਇੱਕ ਚੀਜ ਜੋ Sass ਵੇਰੀਏਬਲ (ਜੋ compiled ਹਨ) ਨਹੀਂ ਕਰ ਸਕਦੇ।

## Killer feature: runtime theming

```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); }
```

ਇੱਕ ਪੂਰਾ theme ਸਵਿਚ ਕਰੋ ਮੁੱਠੀ ਭਰ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਮੁੜ ਪਰਿਭਾਸ਼ਿਤ ਕਰਕੇ — ਕੋਈ ਡੁਪਲਿਕੇਟ rules ਨਹੀਂ। ਤੁਸੀਂ ਇਸਨੂੰ JS ਵਿੱਚ ਵੀ ਕਰ ਸਕਦੇ ਹੋ:

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

ਇਹ ਤੁਰੰਤ ਹਰ element ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ ਜੋ ਉਸ ਵੇਰੀਏਬਲ ਨੂੰ ਵਰਤਦਾ ਹੈ — compiled Sass ਵੇਰੀਏਬਲਾਂ ਨਾਲ ਅਸੰਭਵ।

## ਇਹ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ

CSS ਵੇਰੀਏਬਲ ਆਧੁਨਿਕ **theming ਅਤੇ design tokens** ਦੀ ਬੁਨਿਆਦ ਹਨ: ਇੱਕ ਵਾਰ colors/spacing ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ, ਹਰ ਜਗ੍ਹਾ ਮੁੜ ਵਰਤੋ, ਅਤੇ themes (dark mode, brand variants) ਨੂੰ runtime ਵਿੱਚ media queries ਜਾਂ JavaScript ਦੁਆਰਾ ਸਵਿਚ ਕਰੋ।

ਉਹ plain CSS ਵਿੱਚ DRY, dynamic values ਲਿਆਉਂਦੇ ਹਨ — ਕੋਈ build step ਦੀ ਲੋੜ ਨਹੀਂ।