အရောင်

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

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}ကိန်းရှင်များနှင့်ဤ Sass မြေပုံကိုအသုံးပြုရန်စီစဉ်ပါ။

ဥပမာ

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

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

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

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

v5.1.0 တွင် ထည့်သွင်းထားသည်။

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/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 များအတွက်လည်း အလားတူလုပ်ဆောင်နိုင်ပါသည်။