10 Plugin PostCSS tuyệt vời để biến bạn thành một thuật sĩ CSS
PostCSS là một công cụ cực kỳ linh hoạt giúp nó có thể chuyển đổi các kiểu CSS với các plugin JavaScript. Tính linh hoạt của nó nằm ở cách nó được xây dựng.
Phần cốt lõi của PostCSS là mô-đun Node.js mà bạn có thể cài đặt với npm và nó có hệ sinh thái gồm hơn 200 plugin bạn có thể chọn sử dụng trong dự án của mình.
PostCSS không phải là tiền xử lý, cũng không phải là hậu xử lý, vì các plugin PostCSS khác nhau có thể thuộc một trong hai loại này hoặc cả hai loại này; nó phụ thuộc hoàn toàn vào bạn những gì bạn làm cho nó. Với PostCSS, bạn không cần phải học một cú pháp khác như trong trường hợp của Sass hoặc LESS; bạn có thể bắt đầu sử dụng nó ngay lập tức.
PostCSS lấy tệp CSS hiện tại của bạn và biến nó thành dữ liệu có thể đọc được JavaScript, sau đó các plugin JavaScript thực hiện các sửa đổi và PostCSS trả về phiên bản đã thay đổi của tệp gốc. Nghe hay đấy?
Trong bài đăng này, chúng tôi sẽ xem xét 10 plugin PostCSS để cung cấp cho bạn cái nhìn sâu sắc về một số điều tuyệt vời bạn có thể đạt được với công cụ tuyệt vời này.
1. Tự động trộn
Tự động trộn có lẽ là plugin PostCss nổi tiếng nhất, vì nó được sử dụng bởi các công ty công nghệ đáng chú ý như Google, Twitter và Shopify. Nó thêm tiền tố của nhà cung cấp vào các quy tắc CSS khi cần thiết.
Autoprefixer sử dụng dữ liệu từ Tôi có thể sử dụng. Bằng cách này, nó không bị lỗi thời và luôn có thể áp dụng các quy tắc gần đây nhất. Bạn có thể kiểm tra cách nó hoạt động trên trang web demo tương tác của nó.
2. CSSnext
CSSnext là một bộ chuyển mã CSS cho phép bạn sử dụng cú pháp CSS trong tương lai trên các trang hiện tại. W3C có nhiều quy tắc CSS mới hiện chưa được trình duyệt triển khai, nhưng có thể cho phép các nhà phát triển viết CSS tinh vi hơn nhanh hơn và dễ dàng hơn. CSSnext đã được thực hiện để thu hẹp khoảng cách này.
Thật đáng để xem qua các tính năng của nó để xem những gì bạn có thể thực hiện với nó, ví dụ bạn có thể sử dụng truy vấn phương tiện tùy chỉnh, bộ chọn tùy chỉnh, bộ điều chỉnh màu, bộ lọc SVG và giả mới trong thiết kế của bạn.
3. PreCSS
PreCSS là một trong những plugin PstCSS hoạt động giống như bộ tiền xử lý CSS. Nó làm cho nó có thể tận dụng đánh dấu giống như Sass trong các tập tin tổng hợp của bạn.
Bằng cách đưa PreCSS vào quy trình công việc của bạn, bạn có thể sử dụng các biến, nếu khác các câu lệnh, cho vòng lặp, mixin, @mở rộng và @ nhập khẩu quy tắc, lồng nhau và nhiều tính năng tiện dụng khác trong mã CSS của bạn. Tài liệu Github của PreCSS cung cấp cho bạn các hướng dẫn chi tiết về cách tận dụng tối đa.
4. StyleLint
StyleLint là một kẻ nói dối CSS hiện đại mà hiệu đính và xác nhận mã CSS của bạn. Nó giúp bạn dễ dàng tránh các lỗi và thúc đẩy bạn tuân theo các quy ước mã hóa nhất quán.
StyleLint hiểu cú pháp CSS mới nhất, vì vậy nó có thể được sử dụng cùng với plugin PreCSS đã đề cập trước đó. Nó cũng cho phép bạn tạo cấu hình của riêng mình và thậm chí kiểm tra xem cài đặt của bạn có hợp lệ không.
5. Tài sản PostCSS
Plugin Tài sản PostCSS rất tiện dụng quản lý tài sản cho các tệp CSS của bạn. Nó có thể là một lựa chọn tuyệt vời nếu bạn có xu hướng gặp rắc rối với các đường dẫn URL, vì Tài sản PostCSS tách biệt các tệp biểu định kiểu của bạn khỏi các thay đổi môi trường.
Bạn cần xác định đường dẫn tải, đường dẫn tương đối và đường dẫn cơ sở và plugin sẽ tự động tra cứu các tài sản bạn cần. Ví dụ: bạn có thể viết mã sau nếu bạn cần URL thích hợp của foobar.jpg hình ảnh:
cơ thể nền: giải quyết ('foobar.jpg'); Tài sản PostCSS cũng chăm sóc bộ đệm tài sản, như bạn có thể thiết lập bộ nhớ cache biến thành true nếu bạn muốn đường dẫn URL được tự động thay đổi trong trường hợp nội dung được sửa đổi. Plugin thông minh này cũng tính toán kích thước (chiều rộng và chiều cao) của tệp hình ảnh hoặc thậm chí thay đổi kích thước chúng bằng tỷ lệ đặt trước.
6. CSSNano
Nếu bạn cần các tệp CSS được tối ưu hóa và tối thiểu hóa cho một trang web sản xuất, bạn nên kiểm tra CSSNano. Đây là một plugin mô-đun bao gồm nhiều plugin PostCSS nhỏ hơn, chịu trách nhiệm đơn lẻ. Nó không chỉ thực hiện các kỹ thuật thu nhỏ cơ bản như xóa khoảng trắng, mà còn có các tùy chọn nâng cao giúp tối ưu hóa tập trung có thể.
Trong số nhiều tính năng khác, CSSNano có khả năng loại bỏ các giá trị chỉ mục z, giảm số nhận dạng tùy chỉnh, chuyển đổi giá trị độ dài, thời gian và màu sắc và loại bỏ các tiền tố nhà cung cấp lỗi thời.
7. Nhà ảo thuật phông chữ
Nếu bạn là một fan hâm mộ của kiểu chữ tinh vi, bạn chắc chắn sẽ thích Nhà ảo thuật phông chữ Plugin PostCSS. Phép thuật của Font Magician dựa vào khả năng của nó tự động tạo ra tất cả những thứ cần thiết @mặt chữ quy tắc.
Cách thức hoạt động của nó khá đơn giản, bạn chỉ cần thêm họ phông chữ: "Phông chữ Fav của tôi"; Quy tắc CSS thành một phần tử HTML và Font Magician thực hiện phần còn lại của công việc. Nó có thể thêm Google Fonts, bản sao cục bộ của một phông chữ, kiểu chữ Bootstrap và cũng có thể tải các phông chữ không đồng bộ. Đây là trang web demo tương tác của nó.
8. Viết SVG
Bạn đã bao giờ tự hỏi về việc viết SVG ngay vào các tệp CSS của mình sẽ tuyệt như thế nào chưa? Với sự trợ giúp của plugin Viết SVG PostCSS, bạn có thể dễ dàng đạt được mục tiêu này.
Plugin tiện dụng này, ví dụ, làm cho nó có thể lưu trữ hình nền và biểu tượng SVG của bạn trong tệp CSS của bạn, và sau đó thêm chúng vào phần tử HTML có liên quan theo cách sau:
@svg vuông @rect fill: var (- màu, đen); chiều rộng: 100%; chiều cao: 100%; .example nền: svg trắng (hình vuông param (- màu # 00b1ff));
9. Mất lưới
Mất lưới là một plugin PostCSS tuyệt vời cung cấp cho bạn một ấn tượng Hệ thống lưới CSS điều đó không chỉ hoạt động với CSS đơn giản mà còn với ngôn ngữ tiền xử lý (Sass, BÀI, Bút stylus). Nó sử dụng calc () Chức năng CSS để tạo các lưới đẹp mà bạn có thể dễ dàng sử dụng mà không mất quá nhiều thời gian với việc tùy chỉnh.
Lost Grid có khá nhiều quy tắc đơn giản, ví dụ: xác định một cột có chiều rộng 25% không mất nhiều hơn đoạn mã nhỏ này:
div mất cột: 1/4;
10. Sprites PostCSS
Các PostCSS Sprite plugin giúp bạn dễ dàng tạo các họa tiết hình ảnh, tức là bộ sưu tập hình ảnh được đặt vào một tệp duy nhất. Sau khi đặt một vài tùy chọn, plugin sẽ lấy hình ảnh từ tệp biểu định kiểu của bạn, hợp nhất chúng thành một sprite, sau đó cập nhật các tham chiếu hình ảnh bất cứ khi nào cần thiết.
Bạn có thể sử dụng các bộ lọc và nhóm khác nhau để xác định hình ảnh nào bạn muốn đưa vào sprite và bạn cũng có thể đặt kích thước của hình ảnh đầu ra.
