4 Sass Mixins tiện lợi trong Bootstrap 4

Như nhiều bạn đã biết, Bootstrap là một bộ công cụ mạnh mẽ cho front-end. Nó cho phép chúng ta tạo các trang web nhanh và gọn, đáp ứng trên nhiều thiết bị.

Nếu bạn sử dụng phiên bản dev của bootstrap, bạn sẽ sử dụng toàn bộ mixin của bootstrap bao gồm cả phiên bản scss và less.

Dưới đây tôi sẽ mô tả 5 mixins Bootstrap mà tôi nghĩ bạn nên thử. Chúng được xây dựng ngay trong cả Sass và Less, và có thể giúp bạn tiết kiệm thời gian khi phát triển những trang web tiếp theo của bạn. Trong bài đăng này, chúng ta sẽ sử dụng mixin ở phiên bản scss.

@mixin make-row()

Mixin make-row() thực hiện chính xác những gì nó nói, tạo ra một hàng trong một mạng lưới bootstrap. Tại sao sử dụng mixin này so với chỉ cần thêm lớp .row? Hai lý do. Đầu tiên chúng ta có thể sử dụng mã ngữ nghĩa, vì vậy thay vì:

<div class = "row"> chúng ta có thể sử dụng với một thẻ nào đó như:

<section> Bằng cách này, chúng ta có thể sử dụng một thẻ thích hợp (section, article, v.v.) để chỉ định một phần của trang. Điều này có thể làm cho code dễ đọc hơn và hiểu nội dung nào đi vào hàng đó. Tất cả những gì chúng ta phải làm bây giờ là

section {
     @mixin make-row ();
}

Rất hữu ích và dễ dùng, nhưng tiện ích thực sự của mixin này được thể hiện rõ nhất khi bạn kết hợp việc sử dụng nó với mixin tiếp theo.

@mixin make-*-column()

Mixin này hoạt động kết hợp với @mixin make-row () và là một nhóm mixins. Một trong những mixins cho phép bạn xác định kích thước của cột bạn muốn sử dụng.

Nếu bạn đã quen thuộc với Bootstrap (hoặc bất kỳ hệ thống grid nào), hệ thống grid được dựa trên các hàng có chứa các cột. Vì có lẽ sẽ không bao giờ có một tình huống mà bạn sử dụng một trong các mixins cột mà không có make-row () mixin và ngược lại :

section {
    @include make-row();
    article {
        @include make-lg-column(2);
    }
}

Phần section tạo ra hàng có chứa các cột đóng vai trò như 1 row. Trong trường hợp này mỗi bài viết sẽ bao gồm 2 cột. Kết quả là, ta có thể tạo tới 6 article cho 1 row section.

@mixin size()

Mixin size () là một mixin đơn giản nhưng vô cùng hữu ích. Khi tạo hàng và cột trong Bootstrap, mặc định là kích thước các cột dựa trên nội dung của chúng. Điều này là tốt trong nhiều tình huống, nhưng đôi khi bạn cần một kích thước cụ thể. Đó là khi mà mixin size() được sử dụng. Nó cần hai đối số - chiều cao và chiều rộng:

.example {
    @include size (16%, 300px)
}

Trong trường hợp này tôi đã chọn phần trăm cho chiều rộng là 16%, chiều cao là 300px. Tất nhiên bạn luôn có thể đặt chiều rộng và chiều cao một cách thủ công bằng CSS đơn giản, nhưng nếu dùng mixin, ta chỉ cần 1 dòng. Mixin này cũng có một @ mixin square () tương tự, trong đó nó chỉ cần 1 đối số để lấy làm cả chiều cao và chiều rộng.

@mixin button-variant()

Một mixin khác được thiết kế để cho phép bạn dễ dàng tùy chỉnh hoặc thêm mới button của mình mà có thể sử dụng được và kế thừa các thuộc tính của bootstrap, ta gọi là sự pha trộn các biến thể của button. Mixin này có ba đối số - $color,$ background, và $$border:

.custom-btn {
     @include button-variant(# cece19, # 000000, # 2dbe27);
 }

Như vậy ta sẽ có một button mới mà size, hiệu ứng hover, focus hay active ... sẽ ăn theo mọi thứ thuộc button của bootstrap.

Kết luận

Tóm lại, đây chỉ là một vài minxin cơ bản và phổ biến của bootstrap 4. Có lẽ bạn nên thử vào file mixin.scss của bootstrap để vọc thêm, và tìm ra được những mixin nào là tiện lợi nhất cho bạn hay dự án mà bạn đang làm. Thanks!