အရောင်

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

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,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

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

ဥပမာ

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

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

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

အသုံးအဆောင်များထုတ်လုပ်ခြင်း။

Bootstrap တွင် အရောင်ပြောင်းလဲမှုတိုင်းအတွက် အသုံးအဆောင်များ colorနှင့် အသုံးအဆောင်များ မပါဝင်သော်လည်း ၎င်းတို့ကို ကျွန်ုပ်တို့၏ utility API နှင့် v5.1.0 တွင် ထည့်သွင်းထားသော တိုးချဲ့ထားသော ကျွန်ုပ်တို့၏ Sass မြေပုံများဖြင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် ဖန်တီးနိုင်ပါသည်။background-color

1. စတင်ရန်၊ ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက်များ၊ ကိန်းရှင်များ၊ ရောနှောပါဝင်မှုများနှင့် အသုံးအဆောင်ပစ္စည်းများကို တင်သွင်းထားကြောင်း သေချာပါစေ။
2. map-merge-multiple()မြေပုံအသစ်တစ်ခုတွင် Sass မြေပုံများစွာကို အမြန်ပေါင်းစပ်ရန် ကျွန်ုပ်တို့၏လုပ်ဆောင်ချက်ကို အသုံးပြု ပါ။
3. {color}-{level}မည်သည့် utility ကိုမဆို အတန်းအမည်ဖြင့် တိုးချဲ့ရန် ဤပေါင်းစပ်မြေပုံအသစ်ကို ပေါင်းစည်းပါ ။

.text-purple-500ဤသည်မှာ အထက်ဖော်ပြပါ အဆင့်များကို အသုံးပြု၍ စာသားအရောင် အသုံးအဆောင်များ (ဥပမာ) ကို ထုတ်ပေးသည့် ဥပမာတစ်ခု ဖြစ်ပါသည်။

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}၎င်းသည် အရောင်နှင့် အဆင့်တိုင်းအတွက် အသုံးဝင်မှု အသစ်များကို ထုတ်ပေးမည် ဖြစ်သည်။ အခြား utility နှင့် property များအတွက်လည်း အလားတူလုပ်ဆောင်နိုင်ပါသည်။