CSS Overriding Variables
Local Variable ဖြင့် Global Variable ကို အစားထိုးပါ။
ယခင်စာမျက်နှာမှနေ၍ ကမ္ဘာလုံးဆိုင်ရာကိန်းရှင်များကို စာရွက်စာတမ်းတစ်ခုလုံးမှတစ်ဆင့် ဝင်ရောက်နိုင်/အသုံးပြုနိုင်ကြောင်း ကျွန်ုပ်တို့သိရှိထားပြီး၊ ဒေသဆိုင်ရာ ကိန်းရှင်များကို ၎င်းအား ကြေညာထားသည့် ရွေးချယ်ပေးသည့်နေရာတွင်သာ အသုံးပြုနိုင်သည်။
ယခင်စာမျက်နှာမှ နမူနာကိုကြည့်ပါ-
ဥပမာ
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
တစ်ခါတစ်ရံတွင် ကျွန်ုပ်တို့သည် စာမျက်နှာ၏ သီးခြားကဏ္ဍတစ်ခုတွင်သာ ကိန်းရှင်များကို ပြောင်းလဲစေလိုပါသည်။
ခလုတ်ဒြပ်စင်များအတွက် အပြာရောင် အမျိုးမျိုးကို လိုချင်သည်ဟု ယူဆပါ။ ထို့နောက် ခလုတ်ရွေးချယ်သည့်စနစ်အတွင်း --blue variable ကို ကျွန်ုပ်တို့ ပြန်လည်ကြေငြာနိုင်ပါသည်။ ဤရွေးချယ်မှုအတွင်းတွင် var(--အပြာ) ကို ကျွန်ုပ်တို့အသုံးပြုသောအခါ၊ ဤနေရာတွင် ဖော်ပြထားသော local --blue variable value ကို အသုံးပြုပါမည်။
Local --blue variable သည် ခလုတ်ဒြပ်စင်များအတွက် global --blue variable ကို အစားထိုးမည်ကို ကျွန်ုပ်တို့မြင်ရသည်-
ဥပမာ
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Local Variable အသစ်တစ်ခုကို ထည့်ပါ။
ကိန်းရှင်တစ်ခုကို တစ်နေရာတည်းတွင်သာ အသုံးပြုမည်ဆိုပါက၊ ကျွန်ုပ်တို့သည် ဤကဲ့သို့သော local variable အသစ်တစ်ခုကိုလည်း ကြေညာနိုင်သည်-
ဥပမာ
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် လုပ်ဆောင်ချက်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်
var()
။
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() လုပ်ဆောင်ချက်
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |