Bootstrap Sass

Sass/SCSS có thể rất mạnh khi bạn đã quen thuộc với framework. Tuy nhiên, bắt đầu có thể khó khăn. Đây là một số mẹo cơ bản để giúp thiết lập gói Sass đầu tiên của bạn

Nếu bạn đã từng làm trong lĩnh vực thiết kế và phát triển web, thì có lẽ bạn đã nghe nói về SASS (viết tắt của các biểu định kiểu cú pháp tuyệt vời)

SASS là một CSS có siêu năng lực và một khi bạn dùng thử SASS, bạn sẽ không muốn quay lại viết CSS đơn giản. Đối với các trang web lớn hơn và tương đối phức tạp, việc sử dụng SASS là cần thiết vì đây là một công cụ tuyệt vời để giữ cho mã của bạn được sắp xếp hợp lý, cho phép bạn làm được nhiều việc hơn với CSS và tiết kiệm thời gian viết mã. Kết hợp với sức mạnh của Bootstrap, bạn sẽ có thể xây dựng trang web hiệu quả hơn nhiều. Toàn bộ Bootstrap chạy trên SASS. Tuy nhiên, nếu bạn chưa từng làm việc với SASS trước đây, thì việc tải xuống và thiết lập nó trên máy tính của bạn có thể khá khó khăn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn nơi tải SASS và cách thiết lập nó

Có nhiều cách để tải xuống Bootstrap SASS. Chúng tôi sẽ không đi sâu vào các cách khác nhau để tải xuống các tệp Bootstrap nhưng bạn có thể xem hướng dẫn tại đây. Khi bạn tải xuống các tệp, hãy mở chúng trong trình soạn thảo văn bản của bạn. Chúng tôi khuyên bạn không nên thay đổi các tệp Bootstrap gốc. Thay vào đó, bạn cần tạo các tệp SASS tùy chỉnh của riêng mình và thêm mã mới cũng như sửa đổi các tệp đó. Nếu bạn đã tải xuống Bootstrap bằng npm, cấu trúc thư mục sẽ như thế này

Ghi chú. SASS có hai cú pháp và SCSS là cú pháp chính của SASS nên hầu hết các tệp SASS đều có một. phần mở rộng scss

Nếu bạn đã tải xuống Bootstrap mà không có npm, cấu trúc thư mục sẽ như thế này

Nhập tệp Bootstrap

Tùy thuộc vào dự án của bạn, bạn có thể muốn hoặc không muốn nhập tất cả các tệp Bootstrap. Có hai cách nhập tệp Bootstrap bằng tính năng @import

Nhập tất cả các tệp Bootstrap

Bao gồm mã dưới đây tùy chỉnh của bạn. tập tin scss

Nhập các tệp Bootstrap bạn chọn

Một số tệp Javascript được yêu cầu trong Bootstrap để plugin hoạt động. Các tệp này là các hàm, biến và mixin. trong tùy chỉnh của bạn. scss, trước tiên hãy nhập các tệp cần thiết, sau đó nhập các tệp bạn muốn đưa vào như bên dưới

Xây dựng chủ đề tùy chỉnh của bạn

Trước đây, chúng tôi đã nói về việc tránh thay đổi các tệp Bootstrap gốc vì khi bạn cập nhật Bootstrap, những tệp đó không chỉ bị ghi đè mà còn khó có thể nhìn thấy các sửa đổi bạn đã thực hiện. Đó là lý do tại sao bạn nên tạo cấu trúc thư mục và tệp của riêng mình tách biệt với các tệp Bootstrap. Đó là một cách thực hành tốt để tìm ra kiến ​​trúc, bố cục và bảng màu của trang web của bạn để bạn có thể phân tích trang web của mình thành các thành phần như đầu trang, chân trang, điều hướng bên, v.v. và biết bạn sẽ sử dụng mã màu nào trong các biến của mình. tập tin scss. Đây là cấu trúc thư mục scss mẫu mà chúng tôi có

Như bạn có thể thấy ở trên, chúng tôi đã giải cấu trúc trang web của mình thành các thành phần và tạo các tệp scss riêng cho từng thành phần đó.  

Biến

Tệp biến là một trong những tệp quan trọng nhất trong thư mục scss của bạn vì mọi thứ từ màu sắc, phông chữ, cỡ chữ, khoảng cách, v.v. đều được lưu trữ ở đây. Bootstrap đi kèm với _variables mặc định của nó. tập tin scss. Nếu bạn đã nhập tệp này, bạn cần tạo một tệp riêng cho các biến của chủ đề để tùy chỉnh và ghi đè lên các biến của Bootstrap. tập tin scss. Nếu bạn không nhập tệp, bạn cần tạo tệp biến chủ đề của riêng mình và bắt đầu lại từ đầu. Trong ví dụ của chúng tôi, tất cả các biến của chúng tôi được lưu trữ trong một tệp mà chúng tôi đặt tên là chủ đề-biến. scss

Có một tập tin chủ đề chính

Tạo một tệp chủ đề chính lưu trữ kiểu của các thành phần sẽ được đưa vào mọi trang trên trang web của bạn, chẳng hạn như kiểu danh sách, màu liên kết, hình ảnh, v.v. Đây là một mã mẫu cho một chủ đề. tập tin scss

Tóm lược

Và đó là tất cả những gì bạn cần biết về cách thiết lập gói Sass của mình với Bootstrap. Chúng tôi sẽ để lại cho bạn một vài điều nên làm và không nên làm

- Bạn có thể chọn nhập tất cả các tệp Bootstrap hoặc chọn các tệp cụ thể để nhập

- Không sửa đổi các tệp Bootstrap gốc. Thay vào đó, hãy tạo các tệp của riêng bạn và thực hiện các sửa đổi ở đó

- Phân cấu trúc trang web của bạn thành các thành phần và tạo một bảng màu, sau đó sắp xếp cấu trúc thư mục scss của bạn để bắt chước cấu trúc trang web của bạn

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 các 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

Sass trong Bootstrap là gì?

Sass và Bootstrap có giống nhau không?

Bạn có thể kết hợp Sass và Bootstrap không?

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