Giới thiệu về PostCSS

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

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

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,postcsslệ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.

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

vàhơn rất nhiều!

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:


Công nghệ Wiki trực tuyến!