Bootstrap: تخصيص Sass
آخر تحديث: 2026-08-26
1. مقدمة الدرس
(1) المتطلبات السابقة
- التطبيق الشامل لصفحة رئيسية لموقع شركة (الدرس 19)
- الاستخدام الأساسي لـ Node.js ومدير الحزم npm
- مفاهيم متغيرات CSS والمعالجات الأولية
(2) 🎯 ما ستتعلّمه
- إعداد بيئة تطوير Bootstrap Sass
- تخصيص ألوان العلامة التجارية والمسافات والطباعة عبر تجاوز المتغيرات
- الاستيراد الانتقائي لمكونات Bootstrap لتقليل حجم الملف
- توسيع فئات مساعدة مخصصة
- كتابة سكربت تجميع Sass كامل
(3) المشكلة
لون علامة Bob التجارية هو البنفسجي (وليس الأزرق الافتراضي في Bootstrap)، وتحتاج جميع الأزرار والروابط والحدود إلى التغيير إلى لون العلامة التجارية. باستخدام طريقة CDN، لا يمكن تعديل الأنماط الجاهزة في Bootstrap، مما يتطلب تجاوز كمية كبيرة من CSS يدويًا في كل مرة.
(4) الحل
استخدمت الدروس الـ19 السابقة طريقة CDN لتضمين Bootstrap، حيث كانت جميع الأنماط جاهزة. يبدأ هذا الدرس المرحلة الخامسة — التخصيص العميق لـ Bootstrap عبر Sass، مما يمنحك تحكمًا كاملاً في كل شيء من الألوان والمسافات إلى أنماط المكونات. مع تجاوز متغيرات Sass، تحتاج فقط إلى تغيير سطر واحد: $primary: purple؛.
لفهم الفكرة: طريقة CDN = أكل الوجبات السريعة (سريع لكن بلا خيار). تخصيص Sass = طبخ وجبتك بنفسك (أبطأ لكن قابل للتعديل). متغيرات Sass مثل وصفة التوابل — تغيير متغير واحد يُحدّث تلقائيًا جميع المكونات ذات الصلة.
(5) الفوائد
يحتاج Bob فقط إلى تعديل بضعة متغيرات Sass، وستتغير جميع الأزرار والروابط والحدود تلقائيًا إلى اللون البنفسجي لعلامته التجارية. تعديلات ألوان العلامة المستقبلية تتطلب تغيير مكان واحد فقط للتأثير العام، مما يقلل تكاليف الصيانة بشكل كبير.
2. إعداد البيئة
تحتاج إلى بيئة Node.js وnpm:
BASH
# إنشاء مشروع
mkdir my-bootstrap-project
cd my-bootstrap-project
# التهيئة
npm init -y
# تثبيت Bootstrap وتبعياته
npm install bootstrap@5.3.3
npm install -D sass
هيكل مجلد المشروع:
TEXT
📖 للعرض فقط
my-bootstrap-project/
scss/
custom.scss # ملف Sass المخصص الخاص بك
dist/
style.css # CSS المُجمَّع
index.html
package.json
3. تجاوز المتغيرات الأساسية
▶ مثال: عرض تجاوز المتغيرات الأساسي
scss/custom.scss:
SCSS
// 1. تجاوز متغيرات Bootstrap (يجب أن تكون قبل استيراد bootstrap)
$primary: #6f42c1; // لون العلامة البنفسجي
$success: #20c997; // سماوي مزرق
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$border-radius: 0.5rem; // زوايا مستدارة 8px
$enable-shadows: true; // تفعيل فئات الظلال المساعدة
// 2. استيراد Bootstrap كامل
@import "../node_modules/bootstrap/scss/bootstrap";
// 3. أنماط مخصصة
.custom-hero {
background: linear-gradient(135deg, $primary, darken($primary, 15%));
}
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا. أمر التجميع:
BASH
npx sass scss/custom.scss:dist/style.css --style compressed
index.html:
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Custom Bootstrap</title>
<link rel="stylesheet" href="dist/style.css">
</head>
<body>
<div class="container py-5">
<button class="btn btn-primary">Primary (Purple)</button>
<button class="btn btn-success">Success (Teal)</button>
<div class="card shadow-sm mt-3 p-4" style="max-width: 400px;">
<h5>Custom Card</h5>
<p class="text-body-secondary">Border-radius is 0.5rem, shadows enabled.</p>
</div>
</div>
</body>
</html>
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
4. المتغيرات الأساسية القابلة للتجاوز
(1) الألوان
SCSS
// ألوان العلامة التجارية
$primary: #6f42c1;
$secondary: #6c757d;
$success: #20c997;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;
// ألوان مخصصة
$custom-color: #ff6b6b;
$theme-colors: map-merge($theme-colors, (
"custom": $custom-color,
));
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا. بعد إضافة لون مخصص، يمكنك استخدام
btn-custom،text-custom،bg-custom.
(2) المسافات
SCSS
$spacer: 1rem; // المسافة الأساسية (الافتراضي 1rem = 16px)
$spacers: (
0: 0,
1: $spacer * 0.25, // 4px
2: $spacer * 0.5, // 8px
3: $spacer, // 16px
4: $spacer * 1.5, // 24px
5: $spacer * 3, // 48px
6: $spacer * 4, // 64px (مخصص)
7: $spacer * 5, // 80px (مخصص)
);
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
(3) الطباعة
SCSS
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem; // 16px
$h1-font-size: $font-size-base * 2.5; // 40px
$headings-font-weight: 600;
$line-height-base: 1.7; // أكثر قابلية للقراءة
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
(4) المكونات
SCSS
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;
$border-radius-sm: 0.25rem;
$btn-border-radius: $border-radius;
$card-border-radius: $border-radius-lg;
$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
5. الاستيراد الانتقائي للمكونات
حجم Bootstrap CSS الكامل حوالي 250KB (غير مضغوط). إذا كنت تستخدم بعض المكونات فقط، يمكنك استيراد الوحدات الضرورية فقط:
SCSS
// مطلوب
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// اختياري - اختر ما تحتاجه
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/helpers";
// واجهة الفئات المساعدة (مطلوبة إذا كنت تستخدم utilities)
@import "../node_modules/bootstrap/scss/utilities/api";
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
6. توسيع الفئات المساعدة
SCSS
// إضافة فئات مساعدة مخصصة
$utilities: map-merge(
$utilities, (
"cursor": map-merge(
map-get($utilities, "cursor"),
(
values: map-merge(
map-get(map-get($utilities, "cursor"), "values"),
(pointer: pointer, grab: grab)
),
),
),
)
);
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
7. أمثلة تطبيقية شاملة
▶ مثال: سمة مخصصة كاملة
SCSS
// scss/custom-theme.scss — سمة مخصصة كاملة
// ==========================================
// 1. ألوان العلامة التجارية
$primary: #e83e8c; // وردي
$secondary: #6c757d; // رمادي
$success: #28a745; // أخضر
$info: #17a2b8; // سماوي
$warning: #ffc107; // أصفر
$danger: #dc3545; // أحمر
// 2. الطباعة
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 0.9375rem; // 15px
$headings-font-weight: 700;
$line-height-base: 1.7;
// 3. المسافات
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 4,
7: $spacer * 5,
);
// 4. الحدود والظلال
$border-radius: 0.375rem;
$border-radius-lg: 0.5rem;
$border-radius-sm: 0.25rem;
$enable-shadows: true;
// 5. تعديلات المكونات
$btn-border-radius: 50rem; // أزرار حبة
$card-border-color: rgba(0,0,0,0.08);
$card-box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
$navbar-dark-color: rgba(255,255,255,0.9);
// 6. استيراد Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// 7. إضافات مخصصة
.custom-gradient-bg {
background: linear-gradient(135deg, $primary, darken($primary, 15%));
}
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Theme Demo</title>
<link rel="stylesheet" href="dist/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
<h1>Custom Bootstrap Theme</h1>
<p class="lead">Brand color: <span class="text-primary fw-bold">Pink (#e83e8c)</span></p>
<div class="d-flex gap-2 mb-4 flex-wrap">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card p-4 shadow-sm">
<h5>Custom Card</h5>
<p class="text-body-secondary">Border-radius: 0.5rem, pill buttons above.</p>
<button class="btn btn-primary rounded-pill">Pill Button</button>
</div>
</div>
<div class="col-md-4">
<div class="card p-4 shadow-sm">
<h5>Spacing Test</h5>
<p class="text-body-secondary">Custom spacers p-6 and p-7 available.</p>
<div class="bg-light p-6 rounded">p-6 (4rem padding)</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-4 shadow-sm bg-primary text-white">
<h5>Gradient BG</h5>
<p class="text-white-50">Using custom-gradient-bg class.</p>
</div>
</div>
</div>
</div>
</body>
</html>
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
▶ مثال: توسيع الفئات المساعدة
SCSS
// scss/utilities-extend.scss
// ==========================================
$primary: #6f42c1;
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// توسيع الفئات المساعدة
$utilities: map-merge(
$utilities, (
// إضافة فئات cursor مساعدة
"cursor": map-merge(
map-get($utilities, "cursor"),
(values: map-merge(
map-get(map-get($utilities, "cursor"), "values"),
(pointer: pointer, grab: grab, zoom: zoom-in)
))
),
// إضافة فئات opacity مساعدة
"opacity": (
property: opacity,
values: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1),
),
// خطوات عرض مخصصة
"width": map-merge(
map-get($utilities, "width"),
(values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(15: 15%, 35: 35%, 65: 65%)
))
),
)
);
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extended Utilities</title>
<link rel="stylesheet" href="dist/utilities-extend.css">
</head>
<body>
<div class="container py-4">
<h5>Custom Cursor Utilities</h5>
<div class="d-flex gap-3 mb-4">
<div class="border p-3 cursor-pointer">cursor-pointer</div>
<div class="border p-3 cursor-grab">cursor-grab</div>
<div class="border p-3 cursor-zoom">cursor-zoom</div>
</div>
<h5>Custom Width Steps</h5>
<div class="w-15 bg-primary text-white p-2 mb-1 rounded">w-15</div>
<div class="w-35 bg-success text-white p-2 mb-1 rounded">w-35</div>
<div class="w-65 bg-info text-white p-2 mb-1 rounded">w-65</div>
<h5>Opacity Utilities</h5>
<div class="d-flex gap-2">
<div class="bg-primary text-white p-3 opacity-100 rounded">100%</div>
<div class="bg-primary text-white p-3 opacity-75 rounded">75%</div>
<div class="bg-primary text-white p-3 opacity-50 rounded">50%</div>
<div class="bg-primary text-white p-3 opacity-25 rounded">25%</div>
</div>
</div>
</body>
</html>
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
▶ مثال: الوضع الداكن عبر Sass
SCSS
// scss/dark-theme.scss
// ==========================================
$enable-dark-mode: true;
// تجاوزات الألوان الفاتحة
$primary: #0d6efd;
$body-bg: #ffffff;
$body-color: #212529;
// تجاوزات الوضع الداكن
$dark-bg: #0d1117;
$dark-surface: #161b22;
$dark-border: #30363d;
$primary-dark: #58a6ff;
@import "../node_modules/bootstrap/scss/bootstrap";
// أنماط مخصصة للوضع الداكن
[data-bs-theme="dark"] {
--bs-body-bg: #{$dark-bg};
--bs-body-color: #c9d1d9;
--bs-card-bg: #{$dark-surface};
--bs-border-color: #{$dark-border};
}
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Dark Mode</title>
<link rel="stylesheet" href="dist/dark-theme.css">
</head>
<body>
<div class="container py-4">
<div class="d-flex justify-content-between mb-4">
<h5>Sass Dark Mode Demo</h5>
<button class="btn btn-outline-primary btn-sm" onclick="toggleTheme()">
<i class="bi bi-moon"></i> Toggle
</button>
</div>
<div class="row g-3">
<div class="col-md-4">
<div class="card p-4">
<h5>Card Title</h5>
<p>This card adapts to the current theme.</p>
<button class="btn btn-primary">Button</button>
</div>
</div>
<div class="col-md-4">
<div class="card p-4">
<h5>Dark Surface</h5>
<p>Custom dark variables applied via Sass.</p>
<div class="alert alert-info">Info alert</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-4">
<h5>Border Colors</h5>
<p>Card border uses custom $dark-border.</p>
<div class="border p-2 rounded">Bordered box</div>
</div>
</div>
</div>
</div>
<script>
function toggleTheme() {
const html = document.documentElement;
const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-bs-theme', next);
}
</script>
</body>
</html>
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
▶ مثال: تخصيص المكونات
SCSS
// scss/component-custom.scss
// ==========================================
$primary: #6f42c1;
$border-radius: 0.5rem;
// تخصيص البطاقة
$card-border-radius: 0.75rem;
$card-cap-bg: transparent;
$card-box-shadow: 0 0.5rem 1.5rem rgba(106, 13, 173, 0.1);
$card-border-color: rgba(106, 13, 173, 0.15);
// تخصيص الزر
$btn-padding-y-lg: 0.75rem;
$btn-padding-x-lg: 2rem;
$btn-font-weight: 600;
// تخصيص شريط التنقل
$navbar-padding-y: 1rem;
$navbar-brand-font-size: 1.5rem;
// تخصيص النموذج
$input-border-radius: 0.5rem;
$input-focus-border-color: $primary;
$input-focus-box-shadow: 0 0 0 0.25rem rgba(106, 13, 173, 0.25);
@import "../node_modules/bootstrap/scss/bootstrap";
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Component Customization</title>
<link rel="stylesheet" href="dist/component-custom.css">
</head>
<body>
<div class="container py-4">
<h5>Custom Cards</h5>
<div class="row g-4 mb-5">
<div class="col-md-4">
<div class="card p-4">
<div class="card-body">
<h5 class="card-title">Purple Theme Card</h5>
<p class="card-text">Rounded 0.75rem, purple border, custom shadow.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-4">
<div class="card-body text-center">
<h5 class="card-title">Centered Card</h5>
<p class="card-text">Custom card-cap background removed.</p>
<a href="#" class="btn btn-outline-primary">Details</a>
</div>
</div>
</div>
</div>
<h5>Custom Buttons</h5>
<div class="d-flex gap-2 mb-4">
<button class="btn btn-primary btn-lg">Large Custom</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
</div>
<h5>Custom Forms</h5>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control mb-2" placeholder="Custom input focus...">
<select class="form-select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</div>
</body>
</html>
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
(1) تدفق تجميع Sass
graph LR
A[custom.scss<br/>Variable overriding + custom styles] --> B[Sass compiler]
C[bootstrap/scss/] --> B
B --> D[style.css<br/>Full compilation]
D --> E[PurgeCSS]
E --> F[style.min.css<br/>Only used classes remain]
F --> G[Browser loading]
H[--watch mode] -.-> B
I[--style compressed] -.-> D
النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
(2) جدول مرجع المتغيرات الأساسية
| اسم المتغير | القيمة الافتراضية | الغرض | نطاق التأثير |
|---|---|---|---|
$primary |
#0d6efd |
اللون الأساسي للسمة | الأزرار، الروابط، الخلفيات، الحدود |
$font-size-base |
1rem |
حجم الخط الأساسي | حجم نص المتن العام |
$spacer |
1rem |
قيمة المسافة الأساسية | جميع المسافات p-* m-* gap-* |
$border-radius |
0.375rem |
نصف قطر الحدود الأساسي | الأزرار، البطاقات، المدخلات |
$enable-shadows |
true |
تفعيل الظلال | فئات shadow-* المساعدة |
$enable-dark-mode |
true |
دعم الوضع الداكن | دعم data-bs-theme |
$font-family-sans-serif |
مجموعة خطوط النظام | عائلة الخطوط | خط المتن العام |
(3) جدول بادئات متغيرات المكونات
| المكوّن | بادئة المتغيرات | متغيرات مثال |
|---|---|---|
| الزر | $btn-* |
$btn-border-radius $btn-padding-y |
| البطاقة | $card-* |
$card-border-radius $card-box-shadow |
| شريط التنقل | $navbar-* |
$navbar-padding-y $navbar-dark-color |
| النموذج | $input-* |
$input-border-radius $input-focus-box-shadow |
| Modal | $modal-* |
$modal-backdrop-bg $modal-content-border-radius |
| الجدول | $table-* |
$table-bg $table-striped-order |
| Alert | $alert-* |
$alert-border-radius $alert-link-font-weight |
(4) جدول مقارنة أدوات البناء
| الأداة | الغرض | صعوبة الإعداد | توافق Bootstrap | السيناريو الموصى |
|---|---|---|---|---|
sass (Dart Sass) |
تجميع SCSS إلى CSS | ⭐ | موصى به رسميًا | المشاريع البسيطة، Sass فقط |
| Webpack | تجميع الوحدات + تجميع Sass | ⭐⭐⭐ | شائع الاستخدام | مشاريع SPA الكبيرة |
| Vite | بناء سريع + تجميع Sass | ⭐⭐ | موصى به | مشاريع الواجهة الأمامية الحديثة |
| Parcel | بناء بلا إعداد | ⭐ | قابل للاستخدام | النماذج الأولية السريعة، المشاريع الصغيرة |
| Gulp | مشغّل مهام | ⭐⭐⭐ | تركيبة كلاسيكية | المشاريع التقليدية، سير عمل متعدد المهام |
❓ أسئلة شائعة
س ماذا لو ظهر خطأ في تجميع Sass؟
ج تحقق مما إذا كان إصدار
node-sass أو sass متوافقًا مع Bootstrap 5.3. يُنصح باستخدام sass (Dart Sass). استخدم npx sass لأوامر التجميع بدلاً من التثبيت العام.س هل يمكنني استبدال Sass بمتغيرات CSS (CSS custom properties)؟
ج نعم. يستخدم Bootstrap 5.3 متغيرات CSS بشكل مكثف. يمكنك تجاوز
--bs-primary، --bs-border-radius، إلخ في :root دون أداة تجميع. لكن طريقة Sass أكثر مرونة (تدعم الحسابات والحلقات والدوال المخصصة).س لماذا لم تتغير بعض المكونات بعد تجاوز المتغيرات؟
ج تأكد من تعريف المتغيرات قبل
@import bootstrap. نطاق متغيرات Sass يعتمد على الترتيب — يجب تعريفها قبل استخدامها لتصبح سارية المفعول.س ما الفرق بين Sass وPostCSS؟ أيهما أستخدم؟
ج Sass معالج أولي (متغيرات، تداخل، mixins، حلقات). PostCSS معالج بعدي (إضافة بادئات المتصفح تلقائيًا، إزالة التكرار). يستخدم Bootstrap Sass رسميًا للتخصيص. التركيبة الموصى بها: استخدم Sass لتجاوز المتغيرات والتجميع، واستخدم PostCSS + Autoprefixer لإضافة بادئات المتصفح. لا يتعارضان ويمكن استخدامهما معًا.
س ما ترتيب أولوية تجاوز المتغيرات؟
ج من الأقل إلى الأعلى: (1) افتراضيات Bootstrap؛ (2) التجاوزات في
_variables.scss؛ (3) التجاوزات في custom.scss قبل @import؛ (4) الأنماط المخصصة بعد @import. ملاحظة: متغيرات CSS (--bs-primary) لها أولوية أعلى من متغيرات Sass. يمكنك استخدام :root { --bs-primary: red؛ } للتجاوز دون إعادة تجميع.📖 ملخص
- تدفق تخصيص Sass: تثبيت npm ← إنشاء
custom.scss← تجاوز المتغيرات ← استيراد Bootstrap ← التجميع - متغيرات أساسية قابلة للتجاوز للألوان والمسافات والطباعة ونصف قطر حدود المكونات إلخ.
- الاستيراد الانتقائي للمكونات لتقليل حجم الملف
- أمر التجميع:
npx sass scss/custom.scss dist/style.css
📝 تمارين
- ⭐ أنشئ مشروعًا باستخدام Bootstrap Sass: اضبط لون العلامة التجارية على
#e83e8c(وردي)، نصف قطر حد الزر على0.25rem، وحجم الخط الأساسي على15px. - ⭐⭐ استيراد مكونات انتقائي: استورد فقط grid وbuttons وcards وforms وnavbar. جمّع وقارن فرق الحجم مع Bootstrap الكامل.
- ⭐⭐⭐ مسافات مخصصة: أضف
spacer-6= 4rem وspacer-7= 6rem. تحقق مما إذا كانp-6وmt-7يعملان.
الدرس السابق: تطبيق شامل: صفحة رئيسية لموقع شركة · الدرس التالي: الوضع الداكن
