CSS தனிப்பயன் பண்புகள் (மாறிகள்) என்றால் என்ன?

Question

Accepted Answer

**CSS தனிப்பயன் பண்புகள்** (மாறிகள்) மதிப்புகளை ஒரு முறை சேமித்து மீண்டும் பயன்படுத்த உங்களை அனுமதிக்கின்றன. முன்செயல்பாட்டாளர் (Sass) மாறிகளைப் போலல்லாமல், அவை **இயங்கும் நேரத்தில் நேரலை** — அவை பாய்ந்து செல்கின்றன, பரம்பரை பெறுகின்றன, மற்றும் JavaScript அல்லது மீடியா வினவல்களால் மாற்றப்படலாம்.

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

## ஃபால்பேக் மதிப்புகள்

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

## அவை பாய்ந்து செல்கின்றன மற்றும் நோக்குநிலை மீட்டமைக்க/மேலெழுத முடியும்

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

பரம்பரை பெறுவதால், ஒரு பெற்றோரில் அமைக்கப்பட்ட ஒரு மாறி அனைத்து சந்ததிக்கும் கிடைக்கிறது மற்றும் ஒரு உப-மரத்தில் மேலெழுத முடியும் — Sass மாறிகள் (தொகுக்கப்பட்ட) செய்ய முடியாத ஒன்று.

## கொலை அம்சம்: இயங்கும் நேர பொருள்

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

சில மாறிகளை மறுவரையறை செய்து முழு பொருளையும் மாற்றவும் — நகல் செய்யப்பட்ட விதிகள் இல்லை. நீங்கள் JS இல் இதைச் செய்யலாம்:

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

இது அந்த மாறியைப் பயன்படுத்தும் ஒவ்வொரு உறுப்பையும் உடனடியாக புதுப்பிக்கிறது — தொகுக்கப்பட்ட Sass மாறிகளுடன் சாத்தியமற்றது.

## ஏன் முக்கியமானது

CSS மாறிகள் நவீன **பொருள் மற்றும் வடிவ டோக்கன்களின்** அடிக்கல் — வண்ணங்கள்/இடைவெளிகளை ஒரு முறை வரையறுக்கவும், எங்கும் மீண்டும் பயன்படுத்தவும், மற்றும் மீடியா வினவல்கள் அல்லது JavaScript வழியாக இயங்கும் நேரத்தில் பொருள்களை (இருண்ட முறை, ব্র্যান்ட மாறுபாடுகள்) மாற்றவும்.

அவை DRY மற்றும் இயக்கவியல் மதிப்புகளை சாதாரண CSS க்கு கொண்டு வருகின்றன — கட்ட படி தேவையில்லை.