$spacer trong Bootstrap là gì?

Vì Bootstrap là một khung CSS đáp ứng, bạn có thể thêm nhiều lớp khoảng cách hơn cho các điểm dừng khác nhau. Giả sử bạn chỉ muốn lề dưới là 3rem(48px) khi chiều rộng cửa sổ là 768px hoặc lớn hơn, bạn có thể thêm một lớp giãn cách khác “mb-md-5” vào phần tử. Bạn cũng có thể muốn thêm phần đệm bên trái và bên phải của 0. 5rem(8px) khi chiều rộng cửa sổ là 992px hoặc lớn hơn, do đó bạn sẽ thực hiện việc này bằng cách thêm một lớp khác “px-lg-2”

Nếu bạn mới bắt đầu với Bootstrap hoặc chưa quen lắm với khái niệm lớp giãn cách, bạn có thể đọc thêm về các lớp giãn cách tại trang tài liệu chính thức

Mặc dù các giá trị khoảng cách mặc định mang lại cho bạn một điểm khởi đầu tốt, nhưng trong quá trình phát triển thực tế hàng ngày, bạn sẽ nhanh chóng nhận ra rằng các giá trị này sẽ không đủ. Điều gì sẽ xảy ra nếu nhà thiết kế của bạn muốn cung cấp lề dưới chính xác 45px cho một phần tử thay vì mặc định Bootstrap của tủ quần áo là 3rem(48px)? . 45px”? . Nếu bạn phải viết loại CSS ngẫu nhiên này, thì bạn thực sự đang bỏ lỡ một số lợi ích tuyệt vời khi sử dụng Bootstrap

Một vấn đề khác mà bạn có thể gặp phải với các giá trị lớp giãn cách mặc định là chúng không có giá trị px rõ ràng. Bạn có thể thắc mắc với ví dụ trên, tại sao “mb-4” lại cho bạn 1. Lề dưới 5rem(24px)? . 5)” trong đó $spacer bằng 1rem (16px). Điều này có vẻ phức tạp vì bạn sẽ cần nhớ công thức này bất cứ khi nào bạn muốn sử dụng lớp đệm trong HTML của mình. Điều này cũng có thể trở thành vấn đề nếu bạn đang xây dựng dự án của mình bằng CMS và bạn muốn tạo trường đệm hoặc lề tùy chỉnh để khách hàng của mình tự quản lý khoảng cách giữa các thành phần trang. Làm sao để khách hàng hiểu 4 = 1rem * 1. 5 = 24px?

Tại thời điểm này, bạn có thể thắc mắc, tại sao chúng ta không đặt tên cho lớp giãn cách với giá trị pixel chính xác mà các phần tử có lớp giãn cách sẽ nhận được? . Nếu điều đó có thể được thực hiện, mọi người sẽ dễ dàng hiểu và làm việc với khoảng cách xung quanh các phần tử hơn rất nhiều. Điều đó cũng có nghĩa là chúng tôi sẽ có mức độ linh hoạt cao hơn trong việc thiết lập các giá trị khoảng cách, không giới hạn ở một số ít do Bootstrap cung cấp sẵn.

Điều may mắn là… điều này có thể thực hiện được với sự trợ giúp của Sass

Mở rộng các lớp khoảng cách Bootstrap với Sass

Để bắt đầu, chúng tôi sẽ cài đặt Bootstrap vào dự án của chúng tôi. Có một số cách để làm điều này nhưng vì chúng tôi sẽ sử dụng Sass, chúng tôi sẽ cài đặt Bootstrap dưới dạng gói npm

Khi Bootstrap được cài đặt, chúng tôi có thể nhập nó vào tệp SCSS chính của mình. Ngay trước đó, chúng tôi sẽ muốn nhập tệp SCSS với các biến Bootstrap để chúng tôi có thể ghi đè các giá trị mặc định

Bây giờ, trước tiên chúng ta hãy xem cách các lớp giãn cách mặc định được tạo trong Bootstrap

Như bạn có thể thấy, Bootstrap cung cấp cho chúng ta sáu giá trị lớp khoảng cách (từ “0” đến “5”). Ngoài “0”, năm giá trị còn lại đều là bội số của $spacer là 1rem. Khi chuyển đổi rem sang px, kích thước px mặc định của trình duyệt của phần tử html gốc là 16px. Do đó 1rem = 16px

Khi chúng tôi mở rộng các lớp giãn cách, chúng tôi muốn làm cho phép tính của mình dễ dàng hơn. Do đó, chúng tôi sẽ muốn tạo 1rem = 10px thay vào đó. Chúng ta có thể làm điều này bằng cách đặt kích thước phông chữ của phần tử html gốc thành 62. 5%

Bây giờ 1rem bằng 10px. Vì Bootstrap đặt kích thước phông chữ cơ sở thành 1rem, ban đầu là 16px, chúng tôi sẽ cần cập nhật biến này để kích thước phông chữ px vẫn ở mức 16px mặc dù giá trị pixel của 1rem đã được thay đổi. Trong tệp SCSS biến (có tên là “_vars. scss” trong ví dụ của tôi), chúng tôi sẽ thêm vào như sau

Nếu bạn bị lạc ở bước trên hoặc bạn không hiểu lắm về cách thức hoạt động của đơn vị rem và px, tôi khuyên bạn nên có một hướng dẫn hay có tiêu đề “Đơn vị CSS cho kích thước phông chữ. px. em. rem” của Dixita Ganatra giải thích chính xác điều đó

Chúng tôi sẵn sàng để đi. Giả sử rằng chúng tôi muốn thiết lập các giá trị khoảng cách nằm trong khoảng từ 0 đến 150px với khoảng cách 1px và chúng tôi muốn Bootstrap tạo các lớp đệm cho mỗi và mọi giá trị trong phạm vi đó. Để làm điều này, chúng tôi sẽ ghi đè biến Bootstrap $spacers trong _vars của chúng tôi. tập tin scss. Biến $spacers ban đầu là một bản đồ Sass chứa một số bội số của biến $spacer. Biến $spacers mới của chúng tôi sẽ vẫn là bản đồ của bội số $spacer nhưng chúng tôi sẽ lấp đầy bản đồ với 151 giá trị (0–150px) bằng cách sử dụng chỉ thị điều khiển @for như hình bên dưới

Nếu chỉ thị điều khiển @for có vẻ lạ đối với bạn, hãy xem hướng dẫn này giải thích cách hoạt động của từng chỉ thị trong số bốn chỉ thị Sass (ba chỉ thị còn lại là @if, @each và @while ). Chỉ thị điều khiển @for trong Sass rất giống với vòng lặp for trong Javascript. Ở đây bạn có thể nhận thấy rằng chúng tôi cũng đã thay đổi giá trị $spacer thành 0. 1rem (1px). Điều này được thực hiện để chúng tôi có thể dễ dàng tạo một giá trị từ khóa khi chúng tôi lặp qua mỗi lần lặp

Once you have added the above to your variable Sass file, compile Sass to CSS. Wow, you immediately get a whole lot of new spacer classes that you can use. The number in the new classes represent their px value. If you put class “mb-144” in a