رنګ

د موضوع رنګونه

scss/_variables.scssموږ د رنګ سکیمونو رامینځته کولو لپاره د کوچني رنګ پیلیټ رامینځته کولو لپاره د ټولو رنګونو فرعي سیټ کاروو ، د Sass متغیرونو او د بوټسټریپ فایل کې د Sass نقشې په توګه هم شتون لري .

دا ټول رنګونه د Sass نقشې په توګه شتون لري $theme-colors.

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

زموږ د Sass نقشې او لوپس سندونه وګورئ چې دا رنګونه څنګه بدل کړئ.

ټول رنګونه

scss/_variables.scssد بوټسټریپ ټول رنګونه په فایل کې د Sass تغیراتو او د Sass نقشې په توګه شتون لري . د دې لپاره چې د فایل اندازې زیاتوالي مخه ونیول شي، موږ د دې هر متغیر لپاره متن یا د شالید رنګ ټولګي نه جوړوو. پرځای یې، موږ د موضوع پیلیټ لپاره د دې رنګونو فرعي سیټ غوره کوو .

ډاډ ترلاسه کړئ چې د برعکس تناسب څارنه وکړئ کله چې تاسو رنګونه تنظیم کړئ. لکه څنګه چې لاندې ښودل شوي، موږ هر یو اصلي رنګونو ته درې برعکس نسبتونه اضافه کړي دي - یو د سویچ اوسني رنګونو لپاره، یو د سپینو په مقابل کې، او بل د تور لپاره.

د Sass په اړه یادښتونه

Sass نشي کولی په برنامه ډول متغیرونه رامینځته کړي ، نو موږ په لاسي ډول د هر رنګ او سیوري لپاره متغیرونه رامینځته کړل. موږ د منځنۍ نقطې ارزښت (د مثال په توګه $blue-500) مشخص کوو او د ساس د رنګ فعالیت له لارې زموږ رنګونه ټینټ (روښانه) یا سیوري (تیرو) لپاره د دودیز رنګ افعال کاروو mix().

کارول mix()ورته نه دي lighten()او darken()- پخوانی مشخص رنګ د سپین یا تور سره مخلوط کوي، پداسې حال کې چې وروستنی یوازې د هر رنګ روښنايي ارزښت تنظیموي. پایله د رنګونو خورا ډیر بشپړ سویټ دی ، لکه څنګه چې پدې CodePen ډیمو کې ښودل شوي .

زموږ tint-color()او shade-color()افعال mix()زموږ د متغیر سره یوځای کاروي $theme-color-interval، کوم چې د هر مخلوط رنګ لپاره چې موږ یې تولید کوو یو ګام فیصده ارزښت ټاکي. د بشپړ سرچینې کوډ لپاره فایلونه scss/_functions.scssوګورئ .scss/_variables.scss

د رنګ ساس نقشه

د بوټسټریپ سرچینې ساس فایلونو کې درې نقشې شاملې دي ترڅو تاسو سره د رنګونو لیست او د دوی هیکس ارزښتونو په چټکۍ او اسانۍ سره لوپ کې مرسته وکړي.

• $colorsزموږ ټول موجود بیس ( 500) رنګونه لیست کوي
• $theme-colorsټول په اصطلاح نومول شوي موضوع رنګونه لیست کوي (لاندې ښودل شوي)
• $graysد خړ رنګ ټول رنګونه او سیوري لیستوي

دننه scss/_variables.scss، تاسو به د بوټسټریپ رنګ تغیرات او د ساس نقشه ومومئ. دلته د $colorsساس نقشه یوه بیلګه ده:

$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
);

په نقشه کې ارزښتونه اضافه کړئ، لیرې کړئ، یا بدل کړئ ترڅو تازه کړئ چې دوی په ډیری نورو برخو کې څنګه کارول کیږي. بدبختانه پدې وخت کې ، هره برخه دا ساس نقشه نه کاروي. راتلونکي تازه معلومات به پدې کې د ښه والي لپاره هڅه وکړي. تر هغه وخته، د ${color}متغیرونو او د دې Sass نقشې کارولو په اړه پالن جوړ کړئ.

بېلګه

دلته دا دي چې تاسو څنګه کولی شئ دا په خپل ساس کې وکاروئ:

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

د رنګ ارزښتونو ترتیب او کارولو لپاره د رنګ او شالید کارولو ټولګي هم شتون لري .colorbackground-color500

د اسانتیاوو پیدا کول

colorبوټسټریپ د هر رنګ متغیر لپاره کارونې او اسانتیاوې شاملې نه دي background-color، مګر تاسو کولی شئ دا پخپله زموږ د یوټیلټي API او زموږ پراخ شوي Sass نقشې په v5.1.0 کې اضافه شوي سره تولید کړئ.

1. د پیل کولو لپاره، ډاډ ترلاسه کړئ چې تاسو زموږ افعال، متغیرات، مکسین، او اسانتیاوې وارد کړي دي.
2. map-merge-multiple()په نوې نقشه کې د ډیری ساس نقشې په چټکۍ سره یوځای کولو لپاره زموږ فعالیت وکاروئ .
3. دا نوې ګډه نقشه یوځای کړئ ترڅو د {color}-{level}ټولګي نوم سره هر ډول افادیت پراخه کړئ.

دلته یو مثال دی چې .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}د هر رنګ او کچې لپاره نوي اسانتیاوې رامینځته کړي. تاسو کولی شئ د نورو خدماتو او ملکیت لپاره هم ورته کار وکړئ.