اللون

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

نستخدم مجموعة فرعية من جميع الألوان لإنشاء لوحة ألوان أصغر لإنشاء أنظمة ألوان ، وهي متوفرة أيضًا كمتغيرات 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,
  "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