رنگ

موضوع جا رنگ

اسان سڀني رنگن جو ذيلي سيٽ استعمال ڪريون ٿا هڪ ننڍڙو رنگ پيلٽ ٺاهڻ لاءِ رنگ اسڪيمن ٺاهڻ لاءِ، ساس متغير ۽ بوٽ اسٽريپ جي scss/_variables.scssفائل ۾ هڪ ساس نقشو پڻ موجود آهي.

اهي سڀئي رنگ هڪ ساس نقشي جي طور تي دستياب آهن $theme-colors.

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

چيڪ ڪريو اسان جا ساس نقشا ۽ لوپ ڊڪس ان لاءِ ته انهن رنگن کي ڪيئن تبديل ڪجي.

سڀ رنگ

سڀئي بوٽ اسٽريپ رنگ موجود آهن ساس متغير ۽ scss/_variables.scssفائل ۾ ساس نقشو. وڌايل فائل جي سائيز کان بچڻ لاء، اسان انهن مان هر هڪ لاء ٽيڪسٽ يا پس منظر رنگ ڪلاس نه ٺاهيندا آهيون. ان جي بدران، اسان انهن رنگن جو هڪ ذيلي سيٽ چونڊون ٿا موضوع جي پيٽ لاءِ .

پڪ ڪريو ته برعڪس تناسب جي نگراني ڪريو جيئن توهان رنگن کي ترتيب ڏيو. جيئن هيٺ ڏيکاريل آهي، اسان هر هڪ مکيه رنگن ۾ ٽي برعڪس تناسب شامل ڪيا آهن- هڪ سويچ جي موجوده رنگن لاءِ، هڪ اڇي جي مقابلي ۾، ۽ هڪ ڪارو جي خلاف.

Sass تي نوٽس

ساس پروگرام طور تي متغير پيدا نٿو ڪري سگهي، تنهنڪري اسان دستي طور تي هر رنگ ۽ ڇانو لاءِ متغير ٺاهيا آهن. اسان مڊ پوائنٽ ويليو (مثال طور، ) بيان ڪريون ٿا ۽ ساس جي رنگ جي فنڪشن $blue-500ذريعي اسان جي رنگن کي ٽِنٽ (روشن) يا ڇانو (ڪارو) ڪرڻ لاءِ ڪسٽم رنگ جا ڪم استعمال ڪريون ٿا.mix()

استعمال mix()ڪرڻ ساڳيو نه آهي lighten()۽ darken()- اڳوڻو مخصوص رنگ کي اڇو يا ڪارو سان ملائي ٿو، جڏهن ته بعد ۾ صرف هر رنگ جي روشني جي قيمت کي ترتيب ڏئي ٿو. نتيجو رنگن جو هڪ وڌيڪ مڪمل سوٽ آهي، جيئن هن CodePen ڊيمو ۾ ڏيکاريل آهي .

اسان جا tint-color()۽ shade-color()افعال mix()اسان جي متغير سان گڏ استعمال ڪندا $theme-color-intervalآھن، جيڪو اسان جي پيدا ڪيل ھر مخلوط رنگ لاء ھڪڙو قدم فيصد قدر بيان ڪري ٿو. مڪمل ماخذ ڪوڊ لاءِ scss/_functions.scss۽ فائلون ڏسو .scss/_variables.scss

رنگ ساس نقشا

بوٽ اسٽريپ جي ماخذ Sass فائلن ۾ ٽي نقشا شامل آھن توھان جي مدد ڪرڻ لاءِ توھان کي جلدي ۽ آساني سان رنگن جي فهرست ۽ انھن جي ھيڪس قدرن تي لوپ.

• $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}۽ هن ساس نقشي.

مثال

ھتي آھي توھان پنھنجي ساس ۾ انھن کي ڪيئن استعمال ڪري سگھو ٿا:

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

رنگ ۽ پس منظر يوٽيلٽي ڪلاس پڻ موجود آهن رنگ جي قيمتن کي ترتيب ڏيڻ color۽ background-colorاستعمال ڪرڻ لاءِ.500

افاديت پيدا ڪرڻ

بوٽ اسٽريپ ۾ شامل نه آهي 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}هي هر رنگ ۽ سطح لاء نئين افاديت پيدا ڪندو . توهان ساڳيو ڪم ڪري سگهو ٿا ڪنهن ٻئي افاديت ۽ ملڪيت لاءِ پڻ.