Cách sử dụng Sass với Bootstrap

Trong bài học này, chúng ta sẽ tìm hiểu về Sass và cách tích hợp Sass với Bootstrap để tùy chỉnh giao diện linh hoạt hơn. Sass giúp bạn sử dụng biến, mixins và functions để kiểm soát màu sắc, khoảng cách và kiểu dáng của Bootstrap một cách dễ dàng.

1. Cài đặt Sass và tích hợp với Bootstrap

Cài đặt Sass

Trước tiên, bạn cần cài đặt Sass nếu chưa có:

npm install -g sass

Nếu sử dụng dự án với Node.js, bạn có thể cài đặt Sass như sau:

npm install sass

Cấu trúc thư mục

Sau khi cài đặt, bạn có thể tổ chức các file Sass như sau:

project-folder/
│── scss/
│   ├── custom.scss
│   ├── _variables.scss
│   ├── _mixins.scss
│── css/
│   ├── custom.css
│── index.html

Import Bootstrap vào Sass

Tạo file custom.scss và import Bootstrap:

@import "bootstrap/scss/bootstrap";

Sau đó, biên dịch file này thành CSS:

sass scss/custom.scss css/custom.css

2. Sử dụng biến, mixins và functions

Biến trong Sass

Bootstrap sử dụng các biến để kiểm soát màu sắc, font chữ và khoảng cách. Bạn có thể ghi đè biến mặc định bằng cách tạo file _variables.scss và khai báo:

$primary: #ff5733; // Màu chính tùy chỉnh
$success: #28a745;
$font-size-base: 1.2rem;

Sau đó, import file này vào custom.scss trước khi import Bootstrap:

@import "variables";
@import "bootstrap/scss/bootstrap";

Mixins trong Sass

Mixins giúp bạn tái sử dụng các đoạn CSS:

@mixin custom-button($color) {
    background-color: $color;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

.button-primary {
    @include custom-button($primary);
}

Functions trong Sass

Sass cho phép bạn tạo các hàm để xử lý giá trị màu sắc:

@function shade-color($color, $percentage) {
    @return mix(black, $color, $percentage);
}

.button-dark {
    background-color: shade-color($primary, 20%);
}

3. Biên dịch file Sass thành CSS

Sau khi tùy chỉnh, bạn cần biên dịch Sass thành CSS:

sass scss/custom.scss css/custom.css

Thêm CSS vào file HTML:

<link rel="stylesheet" href="css/custom.css">

4. Bài tập thực hành

Hãy tạo một file Sass để tùy chỉnh Bootstrap với các yêu cầu sau:

1. Thay đổi màu sắc chủ đạo bằng biến $primary.
2. Tạo mixin cho button có viền bo tròn và hiệu ứng hover.
3. Biên dịch file Sass và áp dụng vào một trang web đơn giản.

5. Kết luận

Qua bài học này, bạn đã hiểu cách sử dụng Sass để tùy chỉnh Bootstrap hiệu quả. Việc sử dụng biến, mixins và functions giúp bạn quản lý giao diện linh hoạt hơn. Hãy thực hành để nắm vững cách sử dụng Sass với Bootstrap nhé!