تخصيص Bootstrap باستخدام SCSS

الدرس الثاني والعشرون: تخصيص Bootstrap باستخدام SCSS

في هذا الدرس، سنتعلم كيفية تخصيص Bootstrap باستخدام SCSS (Sass). SCSS هو امتداد لـ CSS يسمح لك بتخصيص الأنماط بشكل أكثر مرونة وفعالية، مما يسهل تعديل مكونات Bootstrap والتأكد من أن تصميمك يتناسب مع احتياجاتك الخاصة.

سنناقش كيفية تخصيص الألوان، الأنماط الأساسية، والمكونات الأخرى باستخدام SCSS، ونستعرض كيفية استخدام المتغيرات المدمجة في Bootstrap لتغيير الألوان، المسافات، وأبعاد العناصر.

---

1. إعداد بيئة العمل لاستخدام SCSS مع Bootstrap

قبل أن نبدأ بتخصيص Bootstrap باستخدام SCSS، نحتاج أولاً إلى إعداد بيئة العمل الخاصة بنا. تأكد من أنك قد قمت بتثبيت الأدوات التالية:

• Node.js و npm (مدير حزم Node)
• Sass (الذي يتضمن SCSS)
• Bootstrap (يمكنك تثبيت Bootstrap باستخدام npm)

تثبيت Bootstrap عبر npm:

npm install bootstrap

إعداد ملفات SCSS:

قم بإنشاء مجلدات لتنظيم الملفات مثل src/sass و dist/css، ثم أنشئ ملف SCSS مخصص داخل مجلد src/sass لكتابة تعديلاتك.

مثال على هيكل المجلدات:

/project-folder
  /src
    /sass
      _custom.scss  // الملف الذي سنكتب فيه التخصيصات
  /dist
    /css
      styles.css   // الملف النهائي الذي سنحصل عليه بعد تحويل SCSS إلى CSS

إعداد ملف SCSS مخصص:

// _custom.scss
@import "~bootstrap/scss/bootstrap"; // استيراد Bootstrap

// تخصيص الألوان
$primary: #007bff;   // اللون الرئيسي
$secondary: #6c757d; // اللون الثانوي

// تخصيص الأبعاد
$spacer: 1.5rem;  // تخصيص المسافة بين العناصر

// تخصيص الأنماط الأخرى
$font-size-base: 1.2rem;  // تغيير حجم الخط الأساسي

2. تخصيص الألوان في Bootstrap باستخدام SCSS

أحد أهم المزايا التي يقدمها SCSS هو القدرة على تخصيص المتغيرات المدمجة في Bootstrap. كل شيء في Bootstrap يعتمد على SCSS variables، مما يعني أنه يمكننا تخصيص الألوان، الخطوط، والأبعاد عبر تعديل هذه المتغيرات.

تخصيص الألوان الأساسية:

يمكنك تعديل الألوان التي يتم استخدامها في جميع المكونات مثل الأزرار، الخلفيات، النصوص، وغيرها باستخدام المتغيرات التالية:

$primary: #007bff;         // اللون الرئيسي (الأزرار، الروابط)
$secondary: #6c757d;       // اللون الثانوي (الأزرار الثانوية)
$success: #28a745;         // لون النجاح
$danger: #dc3545;          // لون التحذير
$warning: #ffc107;         // لون التحذير
$info: #17a2b8;            // لون المعلومات
$light: #f8f9fa;           // اللون الفاتح
$dark: #343a40;            // اللون الداكن

مثال على تخصيص الأزرار:

.btn-primary {
  background-color: $primary;
  border-color: $primary;
}

.btn-secondary {
  background-color: $secondary;
  border-color: $secondary;
}

تخصيص الألوان باستخدام الألوان الجديدة:

إذا كنت تريد تخصيص الألوان لتناسب هوية علامتك التجارية، يمكنك ببساطة تعديل المتغيرات كما يلي:

$primary: #e91e63;   // تغيير اللون الرئيسي إلى اللون الوردي
$secondary: #4caf50; // تغيير اللون الثانوي إلى اللون الأخضر

---

3. تخصيص الخطوط في Bootstrap باستخدام SCSS

تسمح لك Bootstrap بتخصيص الخطوط بسهولة باستخدام SCSS. يمكنك تغيير الخطوط الأساسية، إضافة خطوط مخصصة، وتعديل أنماط النصوص عبر تخصيص المتغيرات.

تخصيص الخطوط:

// تغيير الخط الأساسي
$font-family-base: 'Roboto', sans-serif;

// تغيير حجم الخط الأساسي
$font-size-base: 1.125rem; // حجم الخط الافتراضي

تخصيص الخطوط داخل العناوين:

$headings-font-family: 'Helvetica Neue', sans-serif; // تغيير خط العناوين
$headings-font-weight: 700; // جعل العناوين بسمك 700

---

4. تخصيص الحواف والظل باستخدام SCSS

تتيح لك Bootstrap أيضًا تخصيص الحواف (borders) والظلال (shadows) باستخدام SCSS.

تخصيص الحواف:

$border-radius: 0.375rem; // تغيير نصف القطر للحواف

تخصيص الظلال:

$box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // تعديل الظلال الافتراضية

مثال على تخصيص الأزرار مع الظلال:

.btn {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

---

5. تخصيص التخطيطات (Layouts) باستخدام SCSS

إذا كنت ترغب في تخصيص المسافات بين العناصر أو تعديل حجم الأعمدة في Bootstrap، يمكنك استخدام متغيرات SCSS الخاصة بالتخطيط.

تخصيص المسافات بين العناصر (Spacing):

$spacer: 1.5rem; // تخصيص المسافة بين العناصر

تخصيص الأعمدة في النظام الشبكي (Grid):

$grid-gutter-width: 2rem; // تعديل المسافة بين الأعمدة

---

6. بناء ملف CSS النهائي

بعد تخصيص SCSS، تحتاج إلى تحويله إلى CSS قابل للاستخدام في مشروعك. يمكنك استخدام Sass لتحويل ملف SCSS إلى CSS:

sass src/sass/custom.scss dist/css/styles.css

إعداد التحويل التلقائي:

يمكنك إعداد npm scripts لتحويل SCSS إلى CSS بشكل تلقائي عند التعديل على الملفات.

"scripts": {
  "sass": "sass --watch src/sass:dist/css"
}

---

7. استخدام Bootstrap المخصص في HTML

بعد تحويل SCSS إلى CSS، يمكنك استخدام الملف النهائي styles.css في مشروعك HTML.

<link rel="stylesheet" href="dist/css/styles.css">

---

8. خاتمة

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