Bootstrap 4 có hỗ trợ Sass không?

Có nhiều cách để thêm Bootstrap vào một dự án, chẳng hạn như sử dụng liên kết CDN, hứa hẹn tốc độ/nhanh chóng. Một tùy chọn phổ biến khác là tải xuống, hoạt động rất tốt và cho phép bạn chỉnh sửa nó khi bạn tiếp tục phát triển dự án. Tuy nhiên, kể từ Bootstrap 4, đã có tùy chọn trình quản lý gói, cho phép bạn cài đặt nó dưới dạng gói. Và nó sẽ hoạt động bất kể bạn đang sử dụng framework nào, có thể là laravel, vue/react-cli, nuxt hay thậm chí là symfony. Các bạn của tôi, đây là chén thánh của tính linh hoạt và linh hoạt của CSS. Tại sao?

Hãy xem, nếu bạn là một người đam mê SASS/SCSS như tôi, thì tính linh hoạt đi kèm với điều đó là vô song. Gói Bootstrap sẽ xuất xưởng cùng với tất cả mã nguồn của nó và về phần kiểu dáng, tất cả được viết bằng Sass. Tất nhiên là có sẵn file biên dịch nếu bạn cần. Quay trở lại phần Sass, bạn có thể thêm nó vào sass dự án của mình để mọi thứ được biên dịch cùng một lúc, Bootstrap và mã CSS tùy chỉnh của bạn. Đủ dễ dàng, phải không? .  

Tất cả nguồn Bootstrap dựa trên một tệp duy nhất có danh sách dài các biến, tất cả đều có thể được ghi đè. Điều thú vị về điều đó là cách bạn có thể thay đổi mọi thứ theo đúng nghĩa đen về thiết kế của dự án bằng cách ghi đè lên các biến này mà không cần viết bất kỳ quy tắc/thuộc tính CSS đơn lẻ nào hoặc sử dụng quy tắc đáng sợ. quy tắc quan trọng. Và nó hoạt động cho những thứ đơn giản như thay đổi màu của nút/liên kết chính của bạn để thay đổi kích thước vùng chứa trên các điểm dừng của bạn, để thêm bao nhiêu khoảng cách tùy thích thay vì 5 khoảng cách thông thường. Bạn có thể tận hưởng sự sạch sẽ và ngăn nắp của Bootstrap CSS, nhưng đồng thời nó cũng phù hợp với bạn

Bây giờ, nếu bạn thích mã rõ ràng, có tổ chức và nhất quán như tôi, bạn có thể sẽ đánh giá cao việc chia nhỏ toàn bộ nguồn sass thành các mô-đun/thành phần tùy thuộc vào mục đích của chúng. Trong trường hợp của tôi, tôi thích tạo các thư mục con cho các tệp khác nhau như vậy

dự án của bạn/

├── tài sản/

│    └── scss/

│   ├─── thành phần/

│   ├─── cấu hình/

│   ├─── tùy chỉnh/

│   ├─── mô-đun/

│   ├─── trang/

│   └─── ứng dụng. scss

│

├── trang/*

└── thành phần/*

• config – có các tệp cấu hình toàn bộ thiết kế của dự án e. g màu sắc, phông chữ, biến, mixin.  
• mô-đun – đối với các tệp ảnh hưởng đến lớp trên cùng của thiết kế, e. kiểu chữ g, biểu tượng, bố cục, v.v. Bất kỳ quy tắc phổ biến cũng sẽ đi vào đây
• tùy chỉnh - có các tệp cho các thành phần bootstrap bị ghi đè/sửa đổi e. g biểu mẫu, phương thức, bảng, nút, v.v. Trong các tệp thành phần tương ứng, tôi thêm nhiều hơn hoặc ghi đè lên một số thuộc tính nhất định của thành phần để đạt được thiết kế/chức năng mong muốn
• thành phần – bất kỳ thành phần tùy chỉnh nào được cung cấp trong thiết kế không dựa trên bất kỳ thành phần Bootstrap hiện có nào. thẻ g, thanh bên, đầu trang, chân trang
• trang – có các tệp ảnh hưởng đến thiết kế cho các trang riêng lẻ, khi cần thiết để tạo tệp thiết kế tùy chỉnh

Bạn có thể tạo các thư mục/thư mục con theo ý thích của mình, chỉ cần nhớ rằng nếu đó là một dự án có một nhóm tuyệt vời, bạn có thể muốn làm cho nó dễ dàng và đơn giản để các thành viên khác trong nhóm có thể hiểu được.  

Sử dụng biến sass

Trong thư mục cấu hình của bạn hoặc bất cứ nơi nào bạn muốn, hãy tạo một `_variables. scss` và thêm tất cả các biến bạn muốn điều chỉnh với các giá trị tùy chỉnh. Khi được xử lý, các biến của bạn sẽ được ưu tiên hơn các biến của Bootstrap, vì các biến đó đã được đặt với. cờ mặc định. Để điều đó xảy ra, bạn phải khai báo tệp biến tùy chỉnh trước khi đưa bootstrap vào sass chính. tập tin

Thêm màu tùy chỉnh

Để thay đổi giao diện, bạn sẽ cần thêm màu sắc và phông chữ tùy chỉnh, điều này cũng liên quan đến việc làm rối thêm một chút với các biến

Bạn có thể thêm một tệp riêng cho các màu tùy chỉnh cho thiết kế dự án hoặc chỉ cần thêm chúng vào tệp biến, tất cả tùy thuộc vào bạn. Cá nhân tôi, khi tôi chọn bảng màu cho một dự án, tôi thích sử dụng bộ làm mát hơn. đồng, mặc dù có những lựa chọn thay thế tuyệt vời khác. Nó cung cấp một cách thực sự dễ dàng để tạo các bảng màu và cũng cho phép bạn lưu và dễ dàng xuất chúng sang một dự án. Bên cạnh đó, nó cũng cung cấp cho bạn tên màu và có thể lấy màu từ một bức tranh, theo cách đó bạn có thể lấy màu từ thiết kế của mình cho dự án của mình, nếu chúng không có nhãn

Điều đó cho phép bạn sử dụng chúng như các biến mà bạn có thể sử dụng ở bất kỳ đâu trong dự án. Nếu bạn muốn thay đổi những màu này, có thể hơi bận nếu bạn sử dụng tên màu. Thay vì sử dụng tên, bạn chỉ cần đánh số chúng bằng một tiền tố chung, sau đó mỗi khi bạn thay đổi, bạn chỉ cần chỉnh sửa các giá trị. Bằng cách này, nếu một màu quá sáng/đục, bạn có thể thay đổi nó ở đó và nó sẽ phản chiếu toàn bộ hoặc nếu bạn muốn thay đổi nó thành một màu hoàn toàn khác

Tuy nhiên, cho đến nay, Bootstrap không nhận ra những màu này, vì vậy bạn không thể có chúng cho các nút, văn bản và nền trừ khi bạn thêm chúng vào màu chủ đề của Bootstrap. Tạo bản đồ màu tùy chỉnh, thêm màu (tên và giá trị) và hợp nhất bản đồ với biến màu chủ đề

Sau đó, bạn có thể sử dụng những màu này để tạo kiểu cho các nút, hình nền và văn bản theo ý muốn. Bootstrap sẽ truyền màu vào các thành phần của chúng

Đi xa hơn

Chắc chắn có nhiều thứ hơn đối với các biến Bootstrap ngoài màu sắc và phông chữ, và thiết kế liên quan đến việc thực hiện nhiều thay đổi hơn để cuối cùng đạt được mục tiêu cuối cùng mong muốn, bất kể thiết kế có phức tạp đến đâu. Tài liệu dành cho Bootstrap 5 cung cấp các biến cần thiết để thay đổi cho từng trang thành phần, giúp dễ dàng xác định biến nào cần thay đổi để chỉnh sửa thiết kế của thành phần cụ thể đó. Điều tương tự cũng có thể nói đối với các tiện ích. thử nghiệm đi

Tôi có thể sử dụng Sass với Bootstrap không?

Sass có giống với Bootstrap không?

Làm cách nào để sử dụng SCSS tùy chỉnh với Bootstrap?

Làm cách nào để thêm CSS tùy chỉnh trong Bootstrap 4?