Khám phá PostCSS, một công cụ tuyệt vời giúp bạn viết CSS hiện đại. PostCSS là một công cụ rất phổ biến cho phép các nhà phát triển viết các trình xử lý trước hoặc xử lý sau CSS
- Giới thiệu
- Tại sao nó rất phổ biến
- Cài đặt PostCSS CLI
- Các plugin PostCSS phổ biến nhất
- Nó khác Sass như thế nào?
Giới thiệu
PostCSS là một công cụ cho phép các nhà phát triển viết CSS tiền xử lý hoặc hậu xử lý, được gọi làbổ sung. Có một số lượng lớn các plugin cung cấp nhiều chức năng và đôi khi thuật ngữ “PostCSS” có nghĩa là chính công cụ đó, cộng với hệ sinh thái plugin.
Các plugin PostCSS có thể được chạy qua dòng lệnh, nhưng chúng thường được gọi bởi những người chạy tác vụ tại thời điểm xây dựng.
Kiến trúc dựa trên plugin cung cấp nền tảng chung cho tất cả các hoạt động liên quan đến CSS mà bạn cần.
Lưu ý: PostCSS mặc dù có tên không phải là trình xử lý hậu kỳ CSS, nhưng nó có thể được sử dụng để xây dựng chúng, cũng như những thứ khác
Tại sao nó rất phổ biến
PostCSS cung cấp một số tính năng sẽcải thiện sâu sắc CSS của bạnvà nó tích hợp thực sự tốt với bất kỳ công cụ xây dựng nào bạn chọn.
Cài đặt PostCSS CLI
Sử dụngSợi:
yarn global add postcss-cli
hoặc lànpm:
npm install -g postcss-cli
Khi điều này được thực hiện,postcss
lệnh sẽ có sẵn trong dòng lệnh của bạn.
Ví dụ: lệnh này chạy plugin trình sửa lỗi tự động trên các tệp CSS có trong thư mục css / và lưu kết quả trong tệp main.css:
postcss --use autoprefixer -o main.css css/*.css
Thông tin thêm về PostCSS CLI tại đây:https://github.com/postcss/postcss-cli.
Các plugin PostCSS phổ biến nhất
PostCSS cung cấp giao diện chung cho một số công cụ tuyệt vời để xử lý CSS của bạn.
Dưới đây là một số plugin phổ biến nhất, để có cái nhìn tổng quan về những gì có thể làm với PostCSS.
Trình sửa lỗi tự động
Trình sửa lỗi tự độngphân tích cú pháp CSS của bạn và xác định xem một số quy tắc có cần tiền tố nhà cung cấp hay không.
Nó làm như vậy theoTôi có thể sử dụngdữ liệu, vì vậy bạn không phải lo lắng nếu một tính năng cần tiền tố hoặc nếu các tiền tố bạn sử dụng hiện không cần thiết vì đã lỗi thời.
Bạn phải viết CSS rõ ràng hơn.
Thí dụ:
a {
display: flex;
}
được biên dịch thành
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
cssnext
https://github.com/MoOx/postcss-cssnext
Plugin này làBabelcủa CSS, cho phép bạn sử dụng các tính năng CSS hiện đại trong khi nó chăm sóc chuyển đổi chúng sang một CSS dễ tiêu hóa hơn cho các trình duyệt cũ hơn:
- nó thêm tiền tố bằng Autoprefixer (vì vậy nếu bạn sử dụng cái này, không cần phải sử dụng Autoprefixer trực tiếp)
- nó cho phép bạn sử dụngBiến CSS
- nó cho phép bạn sử dụng lồng, như trong Sass
Mô-đun CSS
Mô-đun PostCSScho phép bạn sử dụng Mô-đun CSS.
Mô-đun CSS không phải là một phần của tiêu chuẩn CSS, nhưng chúng là một quá trình xây dựng bước để có các bộ chọn phạm vi.
csslint
Linting giúp bạn viết CSS chính xác và tránh lỗi hoặc cạm bẫy. Cácngười tạo kiểu tócplugin cho phép bạn lint CSS tại thời điểm xây dựng.
cssnano
cssnanothu nhỏ CSS của bạn và thực hiện tối ưu hóa mã để có ít mã được phân phối nhất trong quá trình sản xuất.
Các plugin hữu ích khác
Trên repo PostCSS GitHub códanh sách đầy đủ các plugin có sẵn.
Một số trong số những cái tôi thích bao gồm:
- LostGridlà một hệ thống lưới PostCSS
- postcss-sassycung cấp các bản mixin giống như Sass
- postcss lồng vào nhaucung cấp khả năng sử dụng các quy tắc lồng nhau của Sass
- tổ tiên hậu tổ, tham chiếu bất kỳ bộ chọn tổ tiên nào trong CSS lồng nhau
- postcss-simple-vars, sử dụng các biến giống như Sass
- PreCSScung cấp cho bạn nhiều tính năng của Sass và đây là những gì gần giống nhất với một sự thay thế hoàn chỉnh của Sass
Nó khác Sass như thế nào?
Hoặc bất kỳ bộ tiền xử lý CSS nào khác?
Lợi ích chính mà PostCSS cung cấp so với các bộ xử lý trước CSS như Sass hoặc Less là khả năng chọn đường dẫn của riêng bạn và chọn các tính năng bạn cần, đồng thời thêm các khả năng mới. Sass hoặc Less là "cố định", bạn nhận được rất nhiều tính năng mà bạn có thể sử dụng hoặc không thể sử dụng và bạn không thể mở rộng chúng.
Việc bạn “chọn cuộc phiêu lưu của riêng mình” có nghĩa là bạn vẫn có thể sử dụng bất kỳ công cụ nào khác mà bạn thích cùng với PostCSS. Bạn vẫn có thể sử dụng Sass nếu đây là những gì bạn muốn và sử dụng PostCSS để thực hiện những việc khác mà Sass không thể làm, như tự động sửa lỗi hoặc in linting.
Bạn có thể viết plugin PostCSS của riêng mình để làm bất cứ điều gì bạn muốn.
Tải xuống miễn phí của tôiSổ tay CSS
Các hướng dẫn css khác:
- Hướng dẫn Flexbox
- Hướng dẫn về CSS Grid
- Biến CSS (Thuộc tính tùy chỉnh)
- Giới thiệu về PostCSS
- Thuộc tính lề CSS
- Cách căn giữa một phần tử bằng CSS
- Phông chữ Hệ thống CSS
- Cách in HTML của bạn với phong cách
- Hướng dẫn giới thiệu về Chuyển đổi CSS
- Hướng dẫn tạo ảnh động CSS
- Giới thiệu về CSS
- Hướng dẫn CSS
- Cách thiết lập Tailwind với PurgeCSS và PostCSS
- Tờ Tailwind Cheat
- Cách xoay liên tục hình ảnh bằng CSS
- Tạo bảng phản hồi bằng CSS
- Cách gỡ lỗi CSS bằng cách chia đôi
- Bộ chọn CSS
- Xếp tầng CSS
- Đặc tính CSS
- Bộ chọn thuộc tính CSS
- Màu sắc CSS
- Đơn vị CSS
- Url CSS ()
- Kiểu chữ CSS
- Mô hình hộp CSS
- Thuộc tính vị trí CSS
- Truy vấn phương tiện CSS và thiết kế đáp ứng
- Truy vấn tính năng CSS
- Chuyển đổi CSS
- Cách tạo kiểu danh sách bằng CSS
- Tiền tố nhà cung cấp CSS
- Kế thừa CSS
- Lớp giả CSS
- Phần tử giả CSS
- Tạo kiểu bảng HTML bằng CSS
- Thuộc tính Hiển thị CSS
- Hàm calc () CSS
- Đường viền CSS
- Nhập tệp CSS bằng @import
- Xử lý lỗi CSS
- Bộ lọc CSS
- Kích thước hộp CSS
- Nền CSS
- Nhận xét CSS
- Phông chữ CSS
- CSS Padding
- Thuộc tính float CSS và thanh toán bù trừ
- Chuẩn hóa CSS
- Thuộc tính CSS z-index
- Cách tắt lựa chọn văn bản bằng CSS
- Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
- Cách đảo màu bằng CSS
- Các thẻ pre đáp ứng trong CSS
- Nhúng video YouTube thích ứng
- Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
- Cách căn giữa trong flexbox