شخصی‌سازی Bootstrap با Sass
بهنام نوبخت · ۱۴۰۵/۷/۱۲
یکی از دلایل محبوبیت Bootstrap این است که مجموعه بزرگی از کلاس‌ها و کامپوننت‌های آماده را در اختیار توسعه‌دهنده قرار می‌دهد؛ اما در یک پروژه واقعی معمولاً نمی‌خواهیم تمام سایت‌ها دقیقاً شبیه یکدیگر باشند. ممکن است رنگ سازمانی یک سایت آبی باشد، سایت دیگری از رنگ نارنجی استفاده کند، اندازه گوشه‌های کارت‌ها متفاوت باشد یا بخواهیم ظاهر دکمه‌ها، فاصله‌ها، فونت‌ها و کامپوننت‌های Bootstrap را مطابق طراحی اختصاصی پروژه تغییر دهیم. در چنین شرایطی فقط استفاده از کلاس‌های آماده Bootstrap کافی نیست و باید با روش‌های Customization و Sass آشنا شویم. Bootstrap از Sass برای مدیریت بسیاری از متغیرها، توابع و استایل‌های داخلی خود استفاده می‌کند و به ما اجازه می‌دهد قبل از تولید CSS نهایی، بخش‌هایی از Bootstrap را مطابق نیاز پروژه تغییر دهیم. در این مقاله ابتدا مفهوم شخصی‌سازی Bootstrap را بررسی می‌کنیم، سپس با تفاوت CSS و Sass آشنا می‌شویم، متغیرهای Bootstrap را بررسی می‌کنیم، یک پروژه Sass ساده ایجاد می‌کنیم، رنگ‌های اصلی Bootstrap را تغییر می‌دهیم، کامپوننت‌هایی مانند Button و Card را شخصی‌سازی می‌کنیم و در نهایت یک ساختار مناسب برای استفاده از Bootstrap در پروژه‌های واقعی ایجاد خواهیم کرد.
Customization در Bootstrap چیست؟
Customization به معنای شخصی‌سازی است.
فرض کنید Bootstrap به صورت پیش‌فرض یک دکمه آبی دارد:
<button class="btn btn-primary">
ذخیره
</button>اما طراحی پروژه ما از رنگ سازمانی نارنجی استفاده می‌کند.
دو راه کلی داریم.
راه اول این است که بعد از Bootstrap CSS، CSS خودمان را بنویسیم:
.btn-primary {
background-color: orange;
}راه دوم این است که قبل از ساخت CSS نهایی Bootstrap، متغیرهای آن را تغییر دهیم.
این روش در پروژه‌های بزرگ‌تر می‌تواند کنترل بیشتری در اختیار ما قرار دهد.
چرا Bootstrap را شخصی‌سازی کنیم؟
دلایل مختلفی برای Customization وجود دارد:
استفاده از رنگ سازمانی
تغییر اندازه فونت‌ها
تغییر Border Radius
تغییر Spacing
تغییر ظاهر Buttonها
تغییر ظاهر Cardها
ایجاد Theme اختصاصی
کاهش CSS غیرضروری
هماهنگ کردن Bootstrap با Design System پروژه
برای مثال ممکن است یک پروژه دارای این رنگ‌ها باشد:
Primary: #ff6b00
Secondary: #212529
Success: #198754در این حالت بهتر است Bootstrap را با طراحی پروژه هماهنگ کنیم.
CSS و Sass چه تفاوتی دارند؟
CSS زبان اصلی استایل‌دهی صفحات وب است.
مثال:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}اما Sass یک Preprocessor برای CSS است.
یعنی می‌توانیم کد Sass را بنویسیم و سپس آن را به CSS تبدیل کنیم.
ساختار ساده:
Sass
|
| Compile
v
CSS
|
v
Browserمرورگر معمولاً Sass را مستقیماً اجرا نمی‌کند.
در نهایت باید CSS تولید شود.
Sass چیست؟
Sass امکاناتی مانند موارد زیر را در اختیار ما قرار می‌دهد:
Variables
Nesting
Functions
Mixins
Partials
Modules
Calculations
برای مثال در Sass می‌توانیم یک متغیر تعریف کنیم:
$primary-color: #ff6b00;و سپس:
.button {
background-color: $primary-color;
}پس اگر رنگ پروژه تغییر کند، می‌توانیم مقدار متغیر را تغییر دهیم.
چرا Bootstrap از Sass استفاده می‌کند؟
Bootstrap تعداد زیادی متغیر و تنظیمات داخلی دارد.
برای مثال برخی تنظیمات مربوط به:
رنگ‌ها
فاصله‌ها
اندازه فونت
Border Radius
Breakpointها
Shadows
Buttons
Forms
را می‌توان از طریق Sass کنترل کرد.
این موضوع باعث می‌شود بتوانیم Bootstrap را به یک Design System نزدیک‌تر کنیم.
نصب Sass
برای کار با Sass می‌توانیم از Node.js و npm استفاده کنیم.
ابتدا نسخه Node.js را بررسی کنید:
node -vسپس:
npm -vاگر Node.js نصب باشد، می‌توانیم Sass را به پروژه اضافه کنیم:
npm install --save-dev sassپس از نصب، در package.json وابستگی Sass ایجاد می‌شود.
ساختار ساده پروژه
یک ساختار ساده می‌تواند به صورت زیر باشد:
bootstrap-project/
│
├── src/
│ └── scss/
│ └── custom.scss
│
├── dist/
│ └── css/
│ └── custom.css
│
├── index.html
│
└── package.jsonفایل اصلی Sass ما:
src/scss/custom.scssخواهد بود.
فایل خروجی:
dist/css/custom.cssاست.
اولین فایل Sass
در فایل:
src/scss/custom.scssمی‌توانیم بنویسیم:
$primary-color: #ff6b00;
body {
color: $primary-color;
}سپس Sass باید این فایل را به CSS تبدیل کند.
Compile کردن Sass
می‌توانیم از دستور زیر استفاده کنیم:
npx sass src/scss/custom.scss dist/css/custom.cssبعد از اجرای دستور، فایل CSS ساخته می‌شود.
نتیجه تقریباً مشابه این خواهد بود:
body {
color: #ff6b00;
}اکنون مرورگر می‌تواند CSS تولیدشده را استفاده کند.
استفاده از Watch
هنگام توسعه، اجرای دستی دستور Sass بعد از هر تغییر خسته‌کننده است.
می‌توانیم از --watch استفاده کنیم:
npx sass --watch src/scss/custom.scss dist/css/custom.cssاکنون Sass فایل را زیر نظر می‌گیرد.
هر بار که فایل Sass تغییر کند، CSS دوباره تولید می‌شود.
استفاده از Bootstrap در Sass
اگر بخواهیم Bootstrap را واقعاً از طریق Sass شخصی‌سازی کنیم، باید سورس Sass آن را در پروژه داشته باشیم.
می‌توانیم Bootstrap را نصب کنیم:
npm install bootstrapاکنون Bootstrap در:
node_modules/bootstrap/قرار دارد.
ساختار کلی شامل فایل‌ها و پوشه‌های Sass نیز خواهد بود.
Import کردن Bootstrap
یک روش ساده برای شروع:
@import "../node_modules/bootstrap/scss/bootstrap";اما در پروژه‌های جدید Sass بهتر است از سیستم Module و دستور @use استفاده شود.
برای شخصی‌سازی Bootstrap، ساختار داخلی Sass آن اهمیت دارد و بسته به نسخه Bootstrap ممکن است جزئیات فایل‌ها تغییر کند.
روش رایج Customization
یکی از الگوهای متداول برای شخصی‌سازی Bootstrap این است:
$primary: #ff6b00;
$secondary: #212529;
@import "../node_modules/bootstrap/scss/bootstrap";در این حالت قبل از وارد کردن Bootstrap، مقادیر متغیرهای موردنظر را مشخص می‌کنیم.
Bootstrap هنگام ساخت CSS از این مقادیر استفاده می‌کند.
تغییر رنگ Primary
یکی از رایج‌ترین تغییرات، تغییر رنگ Primary است.
مثلاً:
$primary: #ff6b00;
@import "../node_modules/bootstrap/scss/bootstrap";اکنون کلاس:
<button class="btn btn-primary">
ذخیره
</button>از رنگ Primary سفارشی پروژه استفاده خواهد کرد.
این روش از نوشتن تعداد زیادی CSS Override جلوگیری می‌کند.
تغییر رنگ‌های اصلی
می‌توان چند مقدار را تغییر داد:
$primary: #ff6b00;
$secondary: #212529;
$success: #198754;
$danger: #dc3545;
$warning: #ffc107;
$info: #0dcaf0;سپس Bootstrap را وارد کنیم:
@import "../node_modules/bootstrap/scss/bootstrap";با این کار رنگ‌های پایه Bootstrap مطابق تنظیمات ما تولید می‌شوند.
تغییر Border Radius
فرض کنید می‌خواهیم گوشه‌های کامپوننت‌ها کمی گردتر باشند.
می‌توانیم مقدار مربوط به Border Radius را تغییر دهیم.
مثال:
$border-radius: 1rem;
@import "../node_modules/bootstrap/scss/bootstrap";اکنون بسیاری از کامپوننت‌هایی که از مقدار عمومی Border Radius استفاده می‌کنند، گوشه‌های گردتری خواهند داشت.
تغییر Border Radius دکمه‌ها
می‌توانیم تنظیمات مربوط به دکمه‌ها را نیز شخصی‌سازی کنیم.
برای مثال:
$btn-border-radius: 0.75rem;و سپس Bootstrap را وارد کنیم.
@import "../node_modules/bootstrap/scss/bootstrap";این روش به جای Override کردن تک‌تک Buttonها، مقدار پایه را تغییر می‌دهد.
تغییر Font Size
می‌توانیم برخی تنظیمات Typography را نیز تغییر دهیم.
مثال:
$font-size-base: 1rem;یا:
$headings-font-weight: 700;سپس:
@import "../node_modules/bootstrap/scss/bootstrap";این تنظیمات باید با نیاز طراحی پروژه هماهنگ باشند.
تغییر Breakpointها
Bootstrap از Breakpointهای Responsive استفاده می‌کند.
برای مثال:
sm
md
lg
xl
xxlدر برخی پروژه‌ها ممکن است بخواهیم Breakpointهای خاصی داشته باشیم.
Bootstrap متغیرهای Sass مربوط به Breakpointها را نیز در اختیار قرار می‌دهد.
برای نمونه:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);این بخش پیشرفته‌تر است و بهتر است تنها زمانی تغییر داده شود که نیاز واقعی وجود داشته باشد.
تغییر Container Width
Bootstrap برای Containerها اندازه‌های مشخصی دارد.
در برخی پروژه‌ها ممکن است بخواهیم عرض Container در Breakpointهای مختلف تغییر کند.
Bootstrap امکان شخصی‌سازی این مقادیر را نیز از طریق Sass فراهم می‌کند.
اما باید توجه داشته باشیم که تغییرات گسترده در سیستم Grid ممکن است روی تعداد زیادی از صفحات پروژه تأثیر بگذارد.
شخصی‌سازی فقط رنگ نیست
Customization فقط به تغییر رنگ Primary محدود نمی‌شود.
می‌توان موارد مختلفی را مدیریت کرد:
Colors
Typography
Spacing
Borders
Radius
Shadows
Breakpoints
Components
Grid
Forms
Buttonsبنابراین Sass می‌تواند بخشی از Design System پروژه باشد.
ساخت Theme اختصاصی
فرض کنیم برند ما از رنگ نارنجی استفاده می‌کند.
می‌توانیم فایل Sass را به شکل زیر شروع کنیم:
$primary: #ff6b00;
$secondary: #212529;
$border-radius: 0.75rem;
$headings-font-weight: 700;
@import "../node_modules/bootstrap/scss/bootstrap";سپس در HTML:
<button class="btn btn-primary">
شروع کنید
</button>
<button class="btn btn-secondary">
بیشتر بدانید
</button>بدون تغییر HTML، ظاهر پایه Bootstrap مطابق Theme جدید تغییر می‌کند.
ساخت فایل Variables جداگانه
در پروژه‌های بزرگ بهتر است همه تنظیمات را در یک فایل قرار ندهیم.
مثلاً:
src/
└── scss/
├── _variables.scss
└── custom.scssفایل:
_variables.scssمی‌تواند شامل تنظیمات پروژه باشد:
$primary: #ff6b00;
$secondary: #212529;
$border-radius: 0.75rem;و فایل اصلی:
@import "variables";
@import "../node_modules/bootstrap/scss/bootstrap";چرا فایل Partial با _ شروع می‌شود؟
در Sass معمولاً فایل‌هایی که قرار نیست به صورت مستقل CSS تولید کنند، با _ شروع می‌شوند.
مثلاً:
_variables.scss
_buttons.scss
_mixins.scssاین فایل‌ها می‌توانند بخشی از ساختار Sass پروژه باشند.
ساختار حرفه‌ای‌تر Sass
در پروژه‌های بزرگ‌تر می‌توان ساختار زیر را داشت:
scss/
│
├── abstracts/
│ ├── _variables.scss
│ └── _mixins.scss
│
├── components/
│ ├── _buttons.scss
│ ├── _cards.scss
│ └── _forms.scss
│
├── layout/
│ ├── _header.scss
│ └── _footer.scss
│
├── pages/
│ └── _home.scss
│
└── custom.scssالبته برای یک پروژه کوچک لازم نیست چنین ساختار بزرگی ایجاد کنیم.
Bootstrap و CSS سفارشی در کنار هم
قرار نیست با استفاده از Sass دیگر هیچ CSS سفارشی نداشته باشیم.
یک پروژه واقعی ممکن است چنین ساختاری داشته باشد:
Bootstrap
+
Bootstrap Customization
+
Project CSS
=
Final Designبرای مثال Bootstrap می‌تواند Grid، Forms و Components را مدیریت کند و CSS پروژه استایل اختصاصی Hero یا Footer را کنترل کند.
مثال کامل Custom Theme
فرض کنید می‌خواهیم یک Theme ساده برای یک سایت شرکتی بسازیم.
فایل:
src/scss/custom.scss:
$primary: #ff6b00;
$secondary: #212529;
$success: #198754;
$border-radius: 0.75rem;
$btn-border-radius: 0.75rem;
$headings-font-weight: 700;
@import "../node_modules/bootstrap/scss/bootstrap";
body {
font-family: Tahoma, Arial, sans-serif;
}
.hero-section {
padding: 100px 0;
}
.custom-card {
transition: transform 0.2s ease;
}
.custom-card:hover {
transform: translateY(-5px);
}پس از Compile:
npx sass src/scss/custom.scss dist/css/custom.cssدر HTML:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Theme اختصاصی</title>
<link
rel="stylesheet"
href="dist/css/custom.css">
</head>
<body>
<section class="hero-section bg-light">
<div class="container">
<h1 class="display-4 fw-bold">
کسب‌وکار خود را توسعه دهید
</h1>
<p class="lead">
یک رابط کاربری مدرن با Bootstrap بسازید.
</p>
<button class="btn btn-primary btn-lg">
شروع کنید
</button>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="card custom-card h-100">
<div class="card-body">
<h2 class="h5">
طراحی سایت
</h2>
<p>
ایجاد وب‌سایت‌های مدرن و Responsive.
</p>
<button class="btn btn-primary">
مشاهده
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card h-100">
<div class="card-body">
<h2 class="h5">
طراحی اپلیکیشن
</h2>
<p>
طراحی تجربه کاربری برای اپلیکیشن‌ها.
</p>
<button class="btn btn-primary">
مشاهده
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card h-100">
<div class="card-body">
<h2 class="h5">
خدمات دیجیتال
</h2>
<p>
ارائه راهکارهای دیجیتال برای کسب‌وکارها.
</p>
<button class="btn btn-primary">
مشاهده
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>Sass فقط برای Bootstrap نیست
نکته مهم این است که Sass یک ابزار مستقل از Bootstrap است.
می‌توانیم از Sass حتی بدون Bootstrap استفاده کنیم.
مثلاً:
$brand-color: #ff6b00;
.hero {
background-color: $brand-color;
}
.button {
background-color: $brand-color;
}بنابراین یادگیری Sass علاوه بر Bootstrap، در پروژه‌های CSS دیگر نیز مفید است.
Override کردن Bootstrap با CSS
گاهی نیازی به تغییر Sass Bootstrap نداریم.
مثلاً فقط می‌خواهیم یک کلاس اختصاصی ایجاد کنیم:
.my-button {
background-color: #ff6b00;
color: white;
border-radius: 12px;
}و:
<button class="btn my-button">
خرید
</button>این روش برای تغییرات کوچک کاملاً مناسب است.
چه زمانی Sass بهتر است؟
Sass برای مواردی مانند زیر بسیار مفید است:
Theme اختصاصی
پروژه‌های بزرگ
Design System
تغییر گسترده رنگ‌ها
تغییر Typography
تغییر تنظیمات Bootstrap
چند Theme مختلف
مدیریت تعداد زیاد فایل‌های Style
اما اگر فقط بخواهیم یک فاصله یا رنگ یک بخش خاص را تغییر دهیم، ممکن است CSS معمولی کافی باشد.
مراقب تغییر متغیرهای اصلی باشید
هرچه بیشتر Bootstrap را شخصی‌سازی کنیم، احتمال ایجاد تغییرات گسترده در پروژه افزایش پیدا می‌کند.
برای مثال اگر مقدار اصلی:
$border-radiusرا تغییر دهیم، ممکن است روی تعداد زیادی از کامپوننت‌ها تأثیر بگذارد.
بنابراین قبل از تغییر متغیرهای عمومی باید بدانیم چه قسمت‌هایی از پروژه از آن استفاده می‌کنند.
اشتباه رایج: تغییر مستقیم فایل Bootstrap
نباید فایل‌های اصلی Bootstrap داخل:
node_modules/bootstrap/را مستقیماً ویرایش کنیم.
مثلاً نباید برویم داخل فایل‌های Bootstrap و مقدار رنگ را دستی تغییر دهیم.
دلیل این است که با اجرای:
npm installیا تغییر نسخه Bootstrap، تغییرات ما ممکن است از بین بروند.
بهتر است تنظیمات را در فایل‌های خود پروژه قرار دهیم.
اشتباه رایج: استفاده از !important برای همه چیز
یکی دیگر از اشتباهات رایج این است که برای Override کردن Bootstrap مرتباً از:
!importantاستفاده کنیم.
مثال نامناسب:
.btn-primary {
background-color: red !important;
}اگر تعداد زیادی Override با !important داشته باشیم، مدیریت CSS دشوار می‌شود.
بهتر است ابتدا:
کلاس Bootstrap را بررسی کنیم.
متغیر Sass مناسب را پیدا کنیم.
از Utility مناسب استفاده کنیم.
در صورت نیاز CSS اختصاصی بنویسیم.
مدیریت Theme در پروژه واقعی
یک روش مناسب این است که تنظیمات اصلی پروژه را مشخص کنیم:
Brand Colors
Typography
Spacing
Radius
Shadows
Breakpoints
Componentsسپس Bootstrap را با این Design System هماهنگ کنیم.
برای مثال:
$primary: #ff6b00;
$secondary: #212529;
$success: #198754;
$border-radius: 0.75rem;این کار باعث می‌شود ظاهر کلی پروژه یکپارچه‌تر باشد.
نکته مهم درباره Bootstrap RTL
اگر پروژه فارسی RTL باشد، شخصی‌سازی Sass باید با ساختار RTL پروژه نیز هماهنگ شود.
در این حالت فایل Sass پروژه باید در نهایت CSS مناسب RTL تولید کند و نباید بدون توجه به جهت صفحه، نسخه معمولی Bootstrap را جایگزین نسخه RTL کنیم.
هدف این است:
Custom Variables
|
v
Bootstrap Sass
|
v
RTL CSS
|
v
Persian Websiteدر پروژه‌های فارسی، نحوه Build کردن فایل نهایی باید از ابتدا مشخص باشد تا نسخه RTL و تغییرات اختصاصی پروژه با یکدیگر هماهنگ بمانند.
تمرین عملی
یک پروژه Bootstrap ایجاد کنید و Sass را نصب کنید.
سپس:
مرحله اول
یک فایل ایجاد کنید:
src/scss/custom.scssمرحله دوم
رنگ Primary را به یک رنگ دلخواه تغییر دهید:
$primary: #ff6b00;مرحله سوم
Border Radius را تغییر دهید:
$border-radius: 1rem;مرحله چهارم
Bootstrap را وارد کنید:
@import "../node_modules/bootstrap/scss/bootstrap";مرحله پنجم
فایل Sass را Compile کنید:
npx sass src/scss/custom.scss dist/css/custom.cssمرحله ششم
یک صفحه HTML بسازید و حداقل موارد زیر را قرار دهید:
Navbar
Button
Card
Alert
Form
سپس بررسی کنید که تغییرات Theme روی کامپوننت‌ها اعمال شده است.
تمرین پیشرفته
یک Theme اختصاصی برای یک سایت فروشگاهی ایجاد کنید.
Theme باید شامل موارد زیر باشد:
Primary Color
Secondary Color
Success Color
Border Radius
Typography
Buttons
Cards
Forms
Navbarسپس یک صفحه فارسی RTL ایجاد کنید که شامل:
Navbar
Hero
Product Cards
Product Price
Register Form
Footer
باشد.
در نهایت یک فایل CSS خروجی از Sass ایجاد کنید و فقط همان فایل را در HTML استفاده کنید.
جمع‌بندی
در این مقاله با مفهوم Customization در Bootstrap و نقش Sass در شخصی‌سازی این فریم‌ورک آشنا شدیم. یاد گرفتیم که Bootstrap فقط مجموعه‌ای از کلاس‌های آماده نیست و می‌توان بسیاری از تنظیمات آن را قبل از تولید CSS نهایی تغییر داد. با Sass می‌توانیم متغیرهایی مانند رنگ‌های اصلی، Border Radius، Typography و برخی تنظیمات Responsive را مدیریت کنیم. همچنین یاد گرفتیم که نباید فایل‌های اصلی Bootstrap داخل node_modules را مستقیماً تغییر دهیم و بهتر است تنظیمات پروژه را در فایل‌های اختصاصی خودمان قرار دهیم. علاوه بر این، تفاوت بین Override کردن Bootstrap با CSS و شخصی‌سازی آن از طریق Sass را بررسی کردیم و یک Theme اختصاصی ایجاد کردیم. اکنون می‌توانیم Bootstrap را از یک مجموعه استایل آماده به یک پایه مناسب برای Design System پروژه خودمان تبدیل کنیم.
نظرات
هنوز نظری ثبت نشده است.