چطور میشه بوت استرپ رو با استفاده از SASS توسعه داد یا سفارشی‌سازی کرد؟
How to extend/modify/customize Bootstrap with SASS?
سلام من دارم با بوت‌استرپ کار میکنم و میخوام از SASS استفاده کنم تا بتونم بوت استرپ رو سفارشی سازی کنم. میخوام بدونم چطور میتونم متغیرها و استایل‌های بوت استرپ رو تغییر بدم و حتی استایل های جدید بهش اضافه کنم؟
سلام برای سفارشی سازی بوت استرپ با استفاده از SASS توی بوت‌استرپ 5، باید مراحل زیر رو انجام بدی
اول از همه باید بوت‌استرپ و Sass رو نصب کنی. اگه از npm استفاده میکنی، دستور زیر رو بزن:
npm install bootstrap@5.3.0 sassبوت‌استرپ 5 به تو اجازه میده تا به راحتی متغیرهای پیش‌فرض رو override کنی. برای این کار، باید یه فایل scss جدید بسازی و قبل از import کردن فایل های اصلی بوت استرپ، تغییرات خودت رو اعمال کنی.
مثلا میتونی یه فایل به نام custom.scss بسازی
// custom.scss
$primary: #ff5733;
// Import Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";برای اینکه تغییراتت اعمال بشه، باید فایل‌های SCSS رو با استفاده از Sass کامپایل کنی. دستور زیر فایل‌های SCSS رو به CSS تبدیل میکنه:
sass custom.scss custom.cssبعد از اینکه فایل SCSS رو به CSS تبدیل کردی، حالا میونی از فایل CSS جدیدت توی پروژه ات استفاده کنی. کافیه لینک فایل CSS رو توی HTML اضافه کنی
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="custom.css" rel="stylesheet">
<title>Custom Bootstrap</title>
</head>
<body>
<!-- content -->
</body>
</html>برای اضافه کردن استایل‌های جدید، میتونی به راحتی بعد از import کردن فایل‌های بوت استرپ، کدهای خودت رو اضافه کنی
// custom.scss
$primary: #ff5733;
// Import Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
.my-custom-class {
background-color: $primary;
padding: 20px;
border-radius: 5px;
}با این روش، تو میتونی بوت استرپ رو به راحتی با استفاده از SASS سفارشی سازی کنی و استایل‌های جدید به پروژه ات اضافه کنی. این کار به تو کنترل بیشتری روی طراحی میده و میتونی به راحتی ظاهر پروژه ات رو به شکلی که میخوای تغییر بدی. موفق باشی! 😊