CSS Variables - var() လုပ်ဆောင်ချက်
CSS အပြောင်းအလဲများ
var()
CSS variable ၏တန်ဖိုးကိုထည့်သွင်းရန် function ကိုအသုံးပြုသည် ။
CSS variable များသည် DOM သို့ ဝင်ရောက်ခွင့်ရှိသည်၊ ဆိုလိုသည်မှာ သင်သည် ဒေသန္တရ သို့မဟုတ် ကမ္ဘာလုံးဆိုင်ရာ နယ်ပယ်ဖြင့် ကိန်းရှင်များကို ဖန်တီးနိုင်ပြီး၊ JavaScript ဖြင့် ပြောင်းလဲနိုင်သော ကိန်းရှင်များကို ပြောင်းလဲနိုင်ပြီး မီဒီယာမေးမြန်းချက်များအပေါ် အခြေခံထားသော ကိန်းရှင်များကို ပြောင်းလဲနိုင်သည်။
CSS variables များကို အသုံးပြုရန် နည်းလမ်းကောင်းမှာ သင့်ဒီဇိုင်း၏ အရောင်များနှင့် ပတ်သက်လာလျှင် ဖြစ်သည်။ တူညီသောအရောင်များကို ထပ်ခါထပ်ခါ ကူးယူပြီး ကူးထည့်မည့်အစား ၎င်းတို့ကို ကိန်းရှင်များအဖြစ် ထားရှိနိုင်ပါသည်။
ရိုးရာနည်း
အောက်ဖော်ပြပါ ဥပမာသည် စတိုင်စာရွက်တွင် အချို့သောအရောင်များကို သတ်မှတ်ခြင်း၏ ရိုးရာနည်းလမ်းကို ပြသသည် (အသုံးပြုရန်အရောင်များကို သတ်မှတ်ခြင်းဖြင့်၊ သီးခြားဒြပ်စင်တစ်ခုစီအတွက်)
ဥပမာ
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
var() Function ၏ Syntax
var()
CSS variable ၏တန်ဖိုးကိုထည့်သွင်းရန် function ကိုအသုံးပြုသည် ။
function ၏ syntax var()
မှာ အောက်ပါအတိုင်းဖြစ်သည် ။
var(--name, value)
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
မှတ်ချက်- ပြောင်းလဲနိုင်သောအမည်သည် ဒက်ရှ်နှစ်ခု (--) ဖြင့် အစပြုရမည်ဖြစ်ပြီး ၎င်းသည် စာလုံးအကြီးအသေးဖြစ်သည်။
var() ဘယ်လိုအလုပ်လုပ်လဲ။
ပထမအချက်- CSS variable များသည် global သို့မဟုတ် local scope ပါရှိသည်။
Global variables များကို document တစ်ခုလုံးမှတဆင့် ဝင်ရောက်/အသုံးပြုနိုင်ပြီး၊ local variable များကို ၎င်းကိုကြေငြာထားသည့် selector အတွင်းတွင်သာ အသုံးပြုနိုင်ပါသည်။
:root
ကမ္ဘာလုံးဆိုင်ရာ နယ်ပယ်ဖြင့် ကိန်းရှင်တစ်ခုကို ဖန်တီးရန်၊ ၎င်းကို ရွေးချယ် သည့်ကိရိယာအတွင်းတွင် ကြေညာပါ ။ ရွေးချယ်မှုစနစ်သည် စာရွက်စာတမ်း ၏ :root
အမြစ်ဒြပ်စင်နှင့် ကိုက်ညီသည်။
local scope ဖြင့် variable တစ်ခုကို ဖန်တီးရန်၊ ၎င်းကို အသုံးပြုမည့် ရွေးချယ်ရေးကိရိယာအတွင်း၌ ၎င်းကို ကြေညာပါ။
အောက်ပါဥပမာသည် အထက်ဖော်ပြပါ ဥပမာနှင့် တူညီသော်လည်း ဤနေရာတွင် var()
ကျွန်ုပ်တို့သည် လုပ်ဆောင်ချက်ကို အသုံးပြုပါသည်။
ပထမဦးစွာ၊ ကျွန်ုပ်တို့သည် ကမ္ဘာလုံးဆိုင်ရာ ကိန်းရှင်နှစ်ခု (--အပြာနှင့် --အဖြူ) ကို ကြေညာသည်။ ထို့နောက်၊
var()
style sheet တွင် နောက်ပိုင်းတွင် variable များ၏တန်ဖိုးကိုထည့်သွင်းရန် function ကိုအသုံးပြုသည်-
ဥပမာ
: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;
}
var() ကိုအသုံးပြုခြင်း၏ အားသာချက်များမှာ-
- ကုဒ်ကိုဖတ်ရလွယ်ကူစေသည် (ပိုမိုနားလည်နိုင်သည်)
- အရောင်တန်ဖိုးများကို ပြောင်းလဲရန် ပိုမိုလွယ်ကူစေသည်။
အပြာနှင့်အဖြူအရောင်ကို ပိုပျော့ပျောင်းသောအပြာနှင့်အဖြူသို့ပြောင်းရန်၊ ပြောင်းလဲနိုင်သောတန်ဖိုးနှစ်ခုကို ပြောင်းလဲရန် လိုအပ်သည်-
ဥပမာ
:root {
--blue: #6495ed;
--white: #faf0e6;
}
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;
}
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 |