رنګ

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

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

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

بېلګه

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

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

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