Bài 10. Tùy biến Bootstrap: biến CSS và Sass

Để website không “giống mọi trang Bootstrap khác”, bạn cần tùy biến màu, font, bo góc, khoảng cách. Bài này hướng dẫn ba cấp độ: ghi đè biến CSS, ghi đè lớp có chủ đích, và biên dịch lại bằng Sass để thay đổi tận gốc, chỉ nạp phần cần dùng.

50 phútNâng cao
Bạn sẽ học được
  • Ghi đè biến CSS --bs-*
  • Viết CSS riêng đúng thứ tự, tránh !important
  • Tùy biến bằng Sass: $primary, $font-family, $border-radius
  • Chỉ nạp các phần cần dùng để giảm dung lượng

Một số khái niệm

CáchĐộ khóPhạm viKhi nào
Biến CSS --bs-*DễMàu, font, bo góc ở mức trang hoặc thành phầnDùng CDN, chỉnh nhẹ
CSS ghi đèDễTừng thành phầnThêm chi tiết riêng
SassTrung bìnhToàn bộ: màu chủ đề, breakpoint, tiện íchDự án thật, cài bằng npm

Ghi đè biến CSS

<style>
  :root { --bs-primary: #2e7d32; --bs-primary-rgb: 46,125,50; --bs-link-color: #2e7d32; --bs-border-radius: .75rem; --bs-body-font-family: "Segoe UI", system-ui, sans-serif; }
  .btn-primary { --bs-btn-bg: #2e7d32; --bs-btn-border-color: #2e7d32; --bs-btn-hover-bg: #1b5e20; --bs-btn-hover-border-color: #1b5e20; }
</style>
<button class="btn btn-primary">Nút primary màu xanh lá</button>
<a href="#">Liên kết màu thương hiệu</a>
<div class="card mt-2"><div class="card-body">Card bo góc lớn hơn</div></div>
<span class="badge bg-primary">badge</span> <span class="text-primary">text-primary</span>
Kết quả hiển thị

Mỗi thành phần có biến riêng (ví dụ --bs-btn-*); tra trong mục “CSS” cuối mỗi trang tài liệu thành phần.

Tùy biến bằng Sass

npm install bootstrap sass
// scss/custom.scss
// 1. Ghi đè biến TRƯỚC khi nạp Bootstrap
$primary: #2e7d32;
$secondary: #00838f;
$font-family-sans-serif: "Be Vietnam Pro", system-ui, sans-serif;
$border-radius: .75rem;
$enable-shadows: true;

// 2. Nạp toàn bộ Bootstrap
@import "bootstrap/scss/bootstrap";

// 3. Hoặc chỉ nạp phần cần dùng
// @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins";
// @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/grid";
// @import "bootstrap/scss/buttons"; @import "bootstrap/scss/utilities/api";

// 4. CSS riêng của bạn
.hero { background: linear-gradient(135deg, $primary, $secondary); }
npx sass scss/custom.scss css/custom.css --style=compressed --watch

Với Vite chỉ cần import "./scss/custom.scss" trong main.js, Vite tự biên dịch.

Thêm lớp tiện ích riêng

// Thêm màu chủ đề mới "brand" → tự sinh btn-brand, bg-brand, text-brand...
$theme-colors: map-merge($theme-colors, ("brand": #7b1fa2));
Mẹo hay

Đặt tệp CSS riêng của bạn sau tệp Bootstrap; quy tắc có cùng độ ưu tiên sẽ thắng mà không cần !important.

Lưu ý

Đừng sửa trực tiếp tệp trong node_modules/bootstrap: lần cập nhật sau sẽ mất hết thay đổi.

Thực hành
  1. Đổi màu primary và font chữ toàn trang bằng biến CSS.
  2. Cài Bootstrap bằng npm, tạo custom.scss với màu thương hiệu.
  3. Thêm màu chủ đề “brand” và dùng btn-brand.
  4. So sánh dung lượng CSS khi nạp toàn bộ và chỉ nạp phần cần.
Tóm tắt bài học
  • Biến CSS --bs-* cho tùy biến nhanh.
  • CSS riêng đặt sau Bootstrap.
  • Sass: ghi đè biến trước @import, nạp có chọn lọc.
  • $theme-colors để thêm màu chủ đề mới.