9 thư viện Mixin cho các nhà thiết kế Sass nên nhận
Nếu bạn sử dụng Sass trong quy trình phát triển của mình, bạn sẽ biết tầm quan trọng của mixins. Khi bạn thấy một số điều được viết lặp đi lặp lại và tẻ nhạt trong CSS, đó là nơi mixins có thể giúp bạn ngăn chặn công việc lặp đi lặp lại. Một mixin chứa các khai báo CSS mà bạn có thể sử dụng lại trên toàn bộ trang web của mình.
Có rất nhiều mixin được tạo bởi các nhà phát triển, để giúp bạn khi làm việc với Sass trong quá trình phát triển của bạn. Hầu hết bao gồm những thứ thường lặp đi lặp lại trong CSS. Từ thích ứng trên nhiều trình duyệt đến tạo các nút, hình động và hiệu ứng chuyển tiếp, tìm thấy điều này và hơn thế nữa trong 11 thư viện mixin sau đây bạn sẽ nhận được để phát triển Sass của mình.
1. Bourbon
Bourbon là một thư viện Sass chứa mixin, hàm và addon cho phép bạn đơn giản hóa việc tạo biểu định kiểu để sử dụng trên nhiều trình duyệt. Đối với tôi, đây là mixin Sass tuyệt vời nhất. Nó chứa hầu hết mọi thứ bạn cần để tạo kiểu cho trang web của bạn trong khi giữ cho biểu định kiểu của bạn nhẹ.
Kiểm tra tài liệu đầy đủ để sử dụng từng mixin và chức năng có sẵn.
2. Sass CSS3 Mixins
Sass CSS3 Mixins cung cấp các mixin hoạt động trên các trình duyệt khác nhau. Bạn sẽ tìm thấy một loạt các mixin thực hành tốt nhất ở đây như nền, đường viền, hộp, cột, mặt chữ, biến đổi, chuyển tiếp và hoạt hình. Nó là đủ cho nhu cầu tạo kiểu của bạn. Để sử dụng, nhập css3-mixins.scss và gọi mixin trong lớp CSS của bạn.
Tải bản mixin này tại đây.
3. CssOwl
CssOwl cung cấp các mixin hữu ích để đặt vị trí của một phần tử (tương đối hoặc tuyệt đối) và thêm nội dung bằng bộ chọn giả ( :sau và :trước). Nó cũng giúp khi bạn muốn tạo các phần tử sprite: mixin cho phép linh hoạt để đặt vị trí hình ảnh trong sprite của bạn. Ngoài Sass, thư viện mixin CssOwl cũng có sẵn cho LESS và Stylus.
4. Điểm dừng
Breakpoint giúp bạn thực hiện các truy vấn phương tiện thông qua Sass một cách đơn giản. Với Breakpoint, bạn có thể tạo các biến và cung cấp cho nó một giá trị xác định chiều rộng tối thiểu hoặc là chiều rộng tối đa truy vấn phương tiện truyền thông. Vì biến bạn đã tạo có một tên có ý nghĩa, bạn có thể gọi nó dễ dàng để sử dụng trong Sass.
5. Lừa đảo
Scut chứa một tập hợp các hỗn hợp Sass có thể tái sử dụng, giữ chỗ, hàm và các biến giúp bạn dễ dàng thực hiện các mẫu mã kiểu phổ biến. Nó cung cấp mã thực hành tốt nhất để tạo nội dung web như bố cục trang và kiểu chữ. Bạn có thể cắt giảm sự lặp lại khi viết mã bằng cách sử dụng lại mã thường xuyên hơn. Do đó, giúp bạn có tổ chức hơn trong quá trình.
6. Saffron
Với Saffron, bạn có thể thêm hình ảnh động và chuyển tiếp CSS3 một cách dễ dàng. Có hàng tá hình ảnh động và chuyển tiếp có sẵn, bao gồm cả mờ vào / ra, trượt vào / ra, tăng / giảm cũng như các hiệu ứng linh tinh như lắc, teeter, nảy và những thứ khác. Để sử dụng Saffron, chỉ cần đưa mixin vào khai báo Sass và gọi tên hiệu ứng bên trong lớp CSS của bạn. Bạn có thể nhận Saffron bằng cách cài đặt nó bằng Bower hoặc Gem hoặc chỉ cần tải xuống thủ công từ Github.
7. Cài đặt loại
TypeSinstall là một loại bộ công cụ cho Sass. Nó sẽ đặt kích thước phông chữ theo tỷ lệ mô-đun bằng cách sử dụng em (thay vì rems hoặc pixel), nhịp dọc và tiêu đề dựa trên tỷ lệ đáp ứng. Bạn cũng có thể cài đặt bản này với Bower, tải xuống bản phát hành hoặc sao chép repo. Để biết thêm chi tiết, hãy xem trang của nó.
8. Dòng Sass
Sass Line là một mixin Sass giúp bạn tạo ra kiểu chữ tốt hơn. Nó sử dụng đơn vị rems trên phông chữ của bạn để bạn có thể làm việc theo tỷ lệ từ lưới cơ sở. Sass Line sử dụng nhịp thẳng đứng chính xác dựa trên lưới đường cơ sở và cho phép bạn đặt thang đo mô-đun cho từng điểm dừng của mình để có tỷ lệ tốt trên tất cả các khía cạnh của trang web của bạn.
Tới đây để biết thêm chi tiết về cách sử dụng nó.
9. Andy.scs
Andy.scss là một tập hợp các mixins Sass hữu ích, được xây dựng để giúp bạn phát triển giao diện trang web một cách dễ dàng trong khi vẫn giữ cho nó nhẹ. Có hàng tá mixins Sass có sẵn, từ hình nền đến hình ảnh động. Hầu như tất cả các thuộc tính CSS được sử dụng phổ biến được đề cập ở đây. Nhận nó tại Github.
Thêm bài viết về Sass:
- Bắt đầu với Sass
- Đào sâu vào Sass
- Làm thế nào để biên dịch Sass với văn bản tuyệt vời
- Sử dụng Bootstrap 3 với Sass
- Làm thế nào để xây dựng một VCard trực tuyến với Sass & La bàn
- So sánh tiền xử lý CSS: Sass Vs. ÍT HƠN
- Các bảng định kiểu tuyệt vời: Sử dụng La bàn trong Sass
- Cách chuyển đổi CSS sang Sass & SCSS
