اللون

ألوان الموضوع

نستخدم مجموعة فرعية من جميع الألوان لإنشاء لوحة ألوان أصغر لإنشاء أنظمة ألوان ، وهي متوفرة أيضًا كمتغيرات Sass وخريطة Sass في scss/_variables.scssملف Bootstrap.

كل هذه الألوان متوفرة كخريطة Sass ، $theme-colors.

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

تحقق من خرائط Sass ومستندات الحلقات للتعرف على كيفية تعديل هذه الألوان.

جميع الالوان

تتوفر جميع ألوان Bootstrap كمتغيرات Sass وخريطة Sass في scss/_variables.scssالملف. لتجنب زيادة أحجام الملفات ، لا نقوم بإنشاء فئات ألوان نصية أو خلفية لكل من هذه المتغيرات. بدلاً من ذلك ، نختار مجموعة فرعية من هذه الألوان للوحة السمة .

تأكد من مراقبة نسب التباين أثناء تخصيص الألوان. كما هو موضح أدناه ، قمنا بإضافة ثلاث نسب تباين لكل لون رئيسي - واحدة للألوان الحالية للحامل ، وواحدة مقابل الأبيض ، وواحدة مقابل الأسود.

ملاحظات على ساس

لا يمكن لـ Sass إنشاء متغيرات برمجيًا ، لذلك أنشأنا متغيرات يدويًا لكل صبغة وظل بأنفسنا. نحدد قيمة النقطة المتوسطة (على سبيل المثال ، $blue-500) ونستخدم وظائف الألوان المخصصة لتلوين ألواننا (تفتيحها) أو تظليلها (تغميقها) عبر mix()وظيفة ألوان Sass.

يختلف الاستخدام mix()عن - يمزج الأول اللون المحدد مع الأبيض أو الأسود ، بينما يقوم الأخير فقط بضبط قيمة الإضاءة لكل لون lighten(). darken()والنتيجة هي مجموعة كاملة من الألوان ، كما هو موضح في هذا العرض التوضيحي لـ CodePen .

تستخدم وظائفنا tint-color()ووظائفنا جنبًا إلى جنب مع المتغير الخاص بنا ، والذي يحدد قيمة النسبة المئوية المتدرجة لكل لون مختلط ننتجه. انظر والملفات لشفرة المصدر الكاملة.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

خرائط Color Sass

تتضمن ملفات Sass المصدر الخاصة بـ Bootstrap ثلاث خرائط لمساعدتك بسرعة وسهولة في التكرار على قائمة الألوان والقيم السداسية.

• $colors500يسرد جميع الألوان الأساسية المتاحة لدينا
• $theme-colorsيسرد جميع ألوان النسق ذات الأسماء المعنوية (كما هو موضح أدناه)
• $graysيسرد جميع الصبغات والظلال الرمادية

في الداخل scss/_variables.scss، ستجد متغيرات ألوان Bootstrap وخريطة Sass. فيما يلي مثال على $colorsخريطة Sass:

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

تتوفر أيضًا فئات الأدوات المساعدة للألوان والخلفية لتعيين قيم الألوان colorواستخدامها .background-color500

توليد المرافق

لا يتضمن Bootstrap colorوالأدوات background-colorالمساعدة لكل متغير لوني ، ولكن يمكنك إنشاء هذه الأدوات بنفسك باستخدام واجهة برمجة تطبيقات الأداة المساعدة لدينا وخرائط Sass الممتدة المضافة في الإصدار 5.1.0.

1. للبدء ، تأكد من قيامك باستيراد الوظائف والمتغيرات والمزيجات والأدوات المساعدة الخاصة بنا.
2. استخدم map-merge-multiple()وظيفتنا لدمج خرائط Sass المتعددة معًا بسرعة في خريطة جديدة.
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}أدوات مساعدة جديدة لكل لون ومستوى. يمكنك أن تفعل الشيء نفسه مع أي مرافق وممتلكات أخرى أيضًا.