CSS Variables

var() செயல்பாடு ஒரு CSS மாறியின் மதிப்பைச் செருகப் பயன்படுகிறது.

CSS மாறிகள் DOM க்கு அணுகலைக் கொண்டுள்ளன, அதாவது நீங்கள் உள்ளூர் அல்லது உலகளாவிய நோக்கத்துடன் மாறிகளை உருவாக்கலாம், JavaScript உடன் மாறிகளை மாற்றலாம், மற்றும் மீடியா வினவல்களின் அடிப்படையில் மாறிகளை மாற்றலாம்.

CSS மாறிகளைப் பயன்படுத்த ஒரு நல்ல வழி உங்கள் வடிவமைப்பின் நிறங்களைப் பொறுத்தவரை. ஒரே நிறங்களை மீண்டும் மீண்டும் நகலெடுத்து ஒட்டுவதற்குப் பதிலாக, நீங்கள் அவற்றை மாறிகளில் வைக்கலாம்.

CSS Declare a Variable

CSS மாறிகள் உலகளாவிய அல்லது உள்ளூர் நோக்கத்தைக் கொண்டிருக்கலாம்.

உலகளாவிய மாறிகள் முழு ஆவணம் முழுவதும் அணுகலாம், அதே நேரத்தில் உள்ளூர் மாறிகள் அது அறிவிக்கப்பட்ட தேர்வியின் உள்ளே மட்டுமே பயன்படுத்தப்படும்.

உலகளாவிய மாறியை உருவாக்க, அதை :root தேர்விக்குள் அறிவிக்கவும். :root தேர்வி ஆவணத்தின் ரூட் உறுப்புடன் பொருந்துகிறது.

உள்ளூர் மாறியை உருவாக்க, அதைப் பயன்படுத்தப் போகும் தேர்விக்குள் அறிவிக்கவும்.

⚠️ கவனத்திற்குரியது:

ஒரு CSS மாறி பெயர் இரண்டு கோடுகளுடன் (--) தொடங்க வேண்டும் மற்றும் எழுத்துப்பிழை உணர்திறன் கொண்டது!

:root {
  --primary-bg-color: green; /* உலகளாவிய நோக்கம் */
}

.note {
  --note-bg: yellow; /* உள்ளூர் நோக்கம் */
}

The CSS var() Function

var() செயல்பாடு அறிவிக்கப்பட்ட CSS மாறியின் மதிப்பைச் செருகப் பயன்படுகிறது.

var(--name, value)

Value	Description
name	தேவைப்படுகிறது. மாறி பெயர் (இரண்டு கோடுகளுடன் தொடங்க வேண்டும்)
value	விருப்பமானது. பின்வாங்கல் மதிப்பு (மாறி கிடைக்கவில்லை என்றால் பயன்படுத்தப்படும்)

💡 var() பயன்படுத்துவதன் நன்மைகள்:

குறியீட்டை பராமரிக்க எளிதாக்குகிறது (புதுப்பிப்புகளை எளிதாக்குகிறது)
குறியீட்டைப் படிக்க எளிதாக்குகிறது (மேலும் புரிந்துகொள்ளக்கூடியது)
முழு பக்கத்திற்கான நிற மதிப்புகளை மாற்ற எளிதாக்குகிறது

CSS Variables Example

இங்கே, நாங்கள் இரண்டு உலகளாவிய மாறிகளை அறிவிக்கிறோம் (--primary-bg-color மற்றும் --primary-color).

பின்னர், நாங்கள் var() செயல்பாட்டைப் பயன்படுத்தி பாணி தாளில் பின்னர் மாறிகளின் மதிப்பைச் செருகுகிறோம்:

CSS Variables Demo

இந்த உள்ளடக்கத்தில் CSS மாறிகள் பயன்படுத்தப்படுகின்றன:

இந்தக் குறிப்பு CSS மாறிகளைப் பயன்படுத்துகிறது. --primary-bg-color மாறி அனைத்து எல்லைகளுக்கும் பயன்படுத்தப்படுகிறது.

இந்தப் பெட்டி --primary-bg-color மற்றும் --primary-color மாறிகளைப் பயன்படுத்துகிறது.

இந்தப் பெட்டி --local-color என்ற உள்ளூர் மாறியைப் பயன்படுத்துகிறது.

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

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

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

Changing Variable Values

பக்கத்தின் தோற்றத்தை மாற்ற, நீங்கள் இரண்டு மாறி மதிப்புகளை மட்டும் மாற்ற வேண்டும்:

:root {
  --primary-bg-color: #8FBC8F;
  --primary-color: #FFFAF0;
}

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

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

🎨 பயனுள்ள உதவிக்குறிப்பு:

முழு வலைத்தளத்தின் தோற்றத்தையும் இரண்டு மாறி மதிப்புகளை மட்டும் மாற்றுவதன் மூலம் எளிதாக மாற்றலாம். இது வடிவமைப்பு புதுப்பிப்புகளை மிகவும் திறமையானதாக ஆக்குகிறது.

Exercise

❓ நீல நிறங்களுக்கான உலகளாவிய CSS மாறியை அறிவிக்க சரியான மாறி பெயர்களை இழுத்து விடவும்.

:root {
  : #1e90ff;
}

--primary-color

✓ சரி!

primary-color

✗ தவறு! CSS மாறிகள் -- உடன் தொடங்க வேண்டும்

var(--primary-color)

✗ தவறு! இது மாறி அறிவிப்பு அல்ல, var() பயன்பாடு

$primary-color

✗ தவறு! $ என்பது Sass க்கானது, CSS மாறிகள் அல்ல

CSS var() Function

பின்வரும் அட்டவணை CSS var() செயல்பாட்டை விவரிக்கிறது:

Function	Description
var()	ஒரு CSS மாறியின் மதிப்பைச் செருகுகிறது