Jassif Team Institution

Override Global Variable With Local Variable

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

சில நேரங்களில் மாறிகள் பக்கத்தின் ஒரு குறிப்பிட்ட பகுதியில் மட்டும் மாற வேண்டும் என்று நாங்கள் விரும்புகிறோம்.

<p class="note"> உறுப்புகளுக்கு வெவ்வேறு எல்லை நிறம் வேண்டும் என்று வைத்துக்கொள்வோம். பின்னர், நாம் .note தேர்விக்குள் --primary-bg-color மாறியை மீண்டும் அறிவிக்கலாம். இந்த தேர்விக்குள் var(--primary-bg-color) பயன்படுத்தும்போது, இங்கு அறிவிக்கப்பட்ட உள்ளூர் --primary-bg-color மாறி மதிப்பைப் பயன்படுத்தும்.

.note தேர்விக்கு உள்ளூர் --primary-bg-color மாறி உலகளாவிய --primary-bg-color மாறியை மேலெழுதும் என்பதைக் காண்கிறோம்:

Override Example

: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 {
  --primary-bg-color: red; /* உள்ளூர் மாறி உலகளாவிய மாறியை மேலெழுதும் */
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

Add a New Local Variable

ஒரு மாறி ஒரு ஒற்றை இடத்தில் மட்டுமே பயன்படுத்தப்படுமென்றால், நாம் ஒரு புதிய உள்ளூர் மாறியையும் அறிவிக்கலாம், இது போன்று:

: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 {
  --note-border-color: red; /* புதிய உள்ளூர் மாறி */
  border: 1px solid var(--note-border-color);
  padding: 10px;
}

Exercise

CSS var() Function

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