အရောင်

အပြင်အဆင် အရောင်များ

scss/_variables.scssSass variable များနှင့် Bootstrap ဖိုင် ရှိ Sass မြေပုံအဖြစ်လည်း ရရှိနိုင်သော အရောင်အစီအစဥ်များဖန်တီးရန်အတွက် သေးငယ်သောအရောင်အကွက်တစ်ခုကို ဖန်တီးရန်အတွက် အရောင်အားလုံး၏ အပိုင်းခွဲတစ်ခုကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။

ဤအရောင်အားလုံးကို Sass မြေပုံအဖြစ် ရနိုင်သည် $theme-colors။

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ဤအရောင်များကို မွမ်းမံနည်းအတွက် ကျွန်ုပ်တို့၏ Sass မြေပုံများနှင့် လှည့်ကွက်မှတ်တမ်းများ ကို ကြည့်ရှုပါ ။

အရောင်အားလုံး

Bootstrap အရောင်အားလုံးကို Sass variables နှင့် Sass map scss/_variables.scssဖိုင်တွင် ရရှိနိုင်ပါသည်။ တိုးမြှင့်ထားသော ဖိုင်အရွယ်အစားကို ရှောင်ရှားရန်၊ ဤကိန်းရှင်တစ်ခုစီအတွက် စာသား သို့မဟုတ် နောက်ခံအရောင်အတန်းများကို ကျွန်ုပ်တို့ မဖန်တီးပါ။ ယင်းအစား၊ ကျွန်ုပ်တို့သည် အပြင်အဆင် palette တစ်ခုအတွက် ဤအရောင်များ၏ အပိုင်းခွဲတစ်ခုကို ရွေးချယ်သည် ။

အရောင်များကို စိတ်ကြိုက်ပြင်ဆင်သည်နှင့် ဆန့်ကျင်ဘက် အချိုးများကို စောင့်ကြည့်ရန် သေချာပါစေ။ အောက်တွင်ဖော်ပြထားသည့်အတိုင်း၊ ကျွန်ုပ်တို့သည် swatch ၏လက်ရှိအရောင်များအတွက်တစ်ခု၊ အဖြူရောင်အတွက်တစ်ခုနှင့်အနက်ရောင်အတွက်တစ်ခုစီအတွက် contrast ratio သုံးခုကိုကျွန်ုပ်တို့ထည့်ထားပါသည်။

Sass ၏မှတ်ချက်များ

Sass သည် ကိန်းရှင်များကို ပရိုဂရမ်စနစ်တကျ မထုတ်ပေးနိုင်ပါ၊ ထို့ကြောင့် ကျွန်ုပ်တို့သည် အရောင်တစ်ခုစီတိုင်းအတွက် ကိန်းရှင်များကို ကိုယ်တိုင်ဖန်တီးပြီး အရိပ်အာဝါသကို ကိုယ်တိုင်ဖန်တီးပါသည်။ ကျွန်ုပ်တို့သည် အလယ်အလတ်မှတ်တန်ဖိုး (ဥပမာ၊ $blue-500) ကို သတ်မှတ်ပြီး Sass ၏ အရောင်လုပ်ဆောင်ချက်မှတစ်ဆင့် ကျွန်ုပ်တို့၏အရောင်များကို အရောင်တင်ရန် (ဖျော့ဖျော့) သို့မဟုတ် အရိပ် (အမှောင်) ပြုလုပ်ရန်အတွက် စိတ်ကြိုက်အရောင်လုပ်ဆောင်ချက်များကို အသုံးပြု mix()ပါသည်။

အသုံးပြုခြင်း နှင့် mix()မတူဘဲ —ယခင်က သတ်မှတ်ထားသောအရောင်ကို အဖြူ သို့မဟုတ် အနက်ဖြင့် ရောစပ်ထားသော်လည်း နောက်ပိုင်းတွင် အရောင်တစ်ခုစီ၏အလင်းတန်ဖိုးကိုသာ ချိန်ညှိပေးသည်။ ရလဒ်သည် ဤ CodePen သရုပ်ပြတွင် ပြထားသည့်အတိုင်း အရောင်များ ပိုမိုပြည့်စုံသည် ။lighten()darken()

ကျွန်ုပ်တို့ ထုတ်လုပ်သည့် အရောင်တစ်ခုစီအတွက် ပေါင်းစပ်ရာခိုင်နှုန်းတန်ဖိုးကို သတ်မှတ်ပေးသည့် ကျွန်ုပ်တို့၏ ကိန်းရှင် tint-color()နှင့် shade-color()လုပ်ဆောင်ချက်များကို ကျွန်ုပ်တို့၏ ကိန်းရှင် mix()နှင့်အတူ အသုံးပြုပါသည်။ အရင်းအမြစ်ကုဒ်အပြည့်အစုံအတွက် ဖိုင်များ နှင့် ဖိုင်များကို $theme-color-intervalကြည့်ပါ ။scss/_functions.scssscss/_variables.scss

အရောင် Sass မြေပုံများ

Bootstrap ၏အရင်းအမြစ် Sass ဖိုင်များတွင် အရောင်များနှင့် ၎င်းတို့၏ hex တန်ဖိုးများစာရင်းကို လျင်မြန်လွယ်ကူစွာ လှည့်ပတ်နိုင်ရန် မြေပုံသုံးပုံပါရှိသည်။

• $colorsကျွန်ုပ်တို့၏ရရှိနိုင်သော အခြေခံ ( 500) အရောင်များ အားလုံးကို စာရင်းပေးသည်။
• $theme-colorsဝေါဟာရအလိုက် အမည်ပေးထားသည့် ဆောင်ပုဒ်အရောင်များအားလုံးကို စာရင်းပြုစုသည် (အောက်တွင်ဖော်ပြထားသည်)
• $graysအရောင်များနှင့် မီးခိုးရောင် အရိပ်များအားလုံးကို စာရင်းပြုစုထားသည်။

အတွင်းတွင် scss/_variables.scss၊ Bootstrap ၏အရောင်ပြောင်းလွဲချက်များနှင့် Sass မြေပုံကိုတွေ့လိမ့်မည်။ ဤသည်မှာ $colorsSass မြေပုံ၏ ဥပမာတစ်ခုဖြစ်သည်။

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

အခြားအစိတ်အပိုင်းများစွာတွင် ၎င်းတို့ကိုအသုံးပြုပုံကို အပ်ဒိတ်လုပ်ရန်အတွက် မြေပုံအတွင်းတန်ဖိုးများကို ပေါင်းထည့်၊ ဖယ်ရှားရန် သို့မဟုတ် ပြင်ဆင်ပါ။ ကံမကောင်းစွာပဲ၊ ဒီအချိန်မှာ အစိတ်အပိုင်း တိုင်း က ဒီ Sass မြေပုံကို အသုံးမပြုပါဘူး။ အနာဂတ် အပ်ဒိတ်များသည် ယင်းအပေါ် ပိုမိုကောင်းမွန်လာစေရန် ကြိုးပမ်းပါမည်။ ထိုအချိန်အထိ ${color}variable များနှင့် ဤ Sass မြေပုံကို အသုံးပြုရန် စီစဉ်ပါ။

ဥပမာ

ဤသည်မှာ သင်၏ Sass တွင် ၎င်းတို့ကို မည်သို့အသုံးပြုနိုင်သည်နည်း။

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

အရောင်တန်ဖိုးများနှင့် အရောင်တန်ဖိုးများကို သတ်မှတ်ခြင်း နှင့် အသုံးပြုခြင်း တို့အတွက် အရောင် နှင့် နောက်ခံ အသုံးဝင်မှုအတန်းများကိုလည်း ရနိုင်ပါသည် ။colorbackground-color500