PostCSS dùng để làm gì?

Kể từ khi thành lập, SASS (còn được gọi là Syntactally Awesome Style Sheets) đã gây bão trong thế giới Phát triển Web.

Được xây dựng như một ngôn ngữ mở rộng cho CSS, ngôn ngữ kịch bản tiền xử lý này cho phép Nhà phát triển tận dụng các khái niệm lập trình đơn giản như câu lệnh điều kiện và biến để viết CSS và kết quả là làm việc với CSS trở nên thú vị hơn rất nhiều

Vấn đề là có thể không cần SASS nữa vì PostCSS đã phát triển đủ để thay thế

Và chắc chắn rằng tôi đã thấy các nhà phát triển sử dụng cả hai, nhưng PostCSS có một hệ sinh thái plugin khổng lồ có thể sao chép các tính năng có sẵn trong SASS, đồng thời tránh được một số vấn đề phổ biến mà SASS mắc phải

Các vấn đề với SASS (và bộ tiền xử lý)

Vấn đề lớn nhất với SASS và các bộ tiền xử lý nói chung là chúng không dễ dàng mở rộng

Cần một cái gì đó nhiều hơn những gì được cung cấp?

Thậm chí tệ hơn? . 👎

May mắn thay, bây giờ chúng ta có thể sử dụng PostCSS để giải quyết những vấn đề này

PostCSS là gì?

PostCSS là một thư viện JavaScript chuyển đổi CSS thành JavaScript

Đúng, bạn đã nghe đúng đó

CSS được phiên mã thành một cây cú pháp trừu tượng, sau đó được biểu diễn bằng các đối tượng JavaScript

Sự chuyển đổi này cho phép các nhà phát triển có cơ hội thao tác CSS thông qua các đối tượng đó. Sau đó, sau khi CSS của chúng tôi đã được xử lý, các đối tượng sẽ được chuyển đổi lại thành CSS hợp lệ

Tuyệt vời phải không?

Và đừng lo lắng vì bản thân PostCSS sẽ không làm gì với CSS của chúng ta. Tùy thuộc vào các plugin để áp dụng những thay đổi này, nhưng chúng tôi có thể chọn và chọn những tính năng chúng tôi cần cho dự án của mình

Và như hiện tại, có hàng trăm plugin có sẵn và không thiếu các tùy chọn

Sử dụng PostCSS với Vue

Vì vậy, hãy xem qua cách thiết lập điều này

Nếu bạn đang cài đặt một dự án Vue mới bằng lệnh

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

1, thì PostCSS đã có sẵn trong các dự án Vue của bạn

PostCSS là một công cụ để chuyển đổi phong cách với các plugin JS. Các phần bổ trợ này có thể lint CSS của bạn, hỗ trợ biến và mixins, dịch mã cú pháp CSS trong tương lai, hình ảnh nội tuyến, v.v.

PostCSS được sử dụng bởi các nhà lãnh đạo ngành bao gồm Wikipedia, Twitter, Alibaba và JetBrains. Plugin Autoprefixer PostCSS là một trong những bộ xử lý CSS phổ biến nhất

PostCSS lấy một tệp CSS và cung cấp một API để phân tích và sửa đổi các quy tắc của nó (bằng cách chuyển đổi chúng thành một Cây cú pháp trừu tượng). API này sau đó có thể được sử dụng bởi plugin để làm rất nhiều điều hữu ích, chẳng hạn như. g. , để tự động tìm lỗi hoặc để chèn tiền tố của nhà cung cấp

Hỗ trợ / Thảo luận. Gitter
Tài khoản Twitter. @postcss
VK. trang com. postcss
中文翻译.

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

0

Để được hỗ trợ thương mại PostCSS (tư vấn, cải thiện văn hóa giao diện người dùng của công ty bạn, plugin PostCSS), hãy liên hệ với Evil Martians tại postcss@evilmartians. com

Sự tài trợ

PostCSS cần sự hỗ trợ của bạn. Chúng tôi đang nhận đóng góp tại Open Collective

      

Plugin

Hiện PostCSS có hơn 200 plugin. Bạn có thể tìm thấy tất cả các plugin trong danh sách plugin hoặc trong danh mục có thể tìm kiếm. Dưới đây là danh sách các plugin yêu thích của chúng tôi — minh họa tốt nhất về những gì có thể được xây dựng trên PostCSS

Nếu bạn có bất kỳ ý tưởng mới nào, việc phát triển plugin PostCSS thực sự dễ dàng

Giải quyết vấn đề CSS toàn cầu

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  1 cho phép bạn đặt rõ ràng các plugin PostCSS trong CSS và chỉ thực thi chúng cho tệp hiện tại

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  2 và

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  3 tự động cách ly bộ chọn trong các thành phần

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  4 là một giải pháp thay thế cho việc sử dụng thiết lập lại toàn cầu tốt hơn cho các thành phần có thể cách ly

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  5 thêm hỗ trợ

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  6, đặt lại tất cả các kiểu kế thừa

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  7 thêm hỗ trợ truy vấn vùng chứa, cho phép các kiểu đáp ứng với chiều rộng của phần gốc

Sử dụng CSS trong tương lai, ngay hôm nay

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  8 thêm tiền tố nhà cung cấp, sử dụng dữ liệu từ Can I Use

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  9 cho phép bạn sử dụng các tính năng CSS trong tương lai ngay hôm nay

Khả năng đọc CSS tốt hơn

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  0 mở các quy tắc lồng nhau theo cách Sass thực hiện

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  1 sắp xếp nội dung của quy tắc và quy tắc

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  2 bao gồm các phím tắt và trình trợ giúp được sử dụng phổ biến nhất

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  3 thêm và mở rộng nhiều thuộc tính tốc ký

Hình ảnh và Phông chữ

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  4 plugin postcss để rebase url(), nội tuyến hoặc sao chép nội dung

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  5 tạo các họa tiết hình ảnh

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  6 tạo ra tất cả các quy tắc

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  7 cần thiết trong CSS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  8 cho phép bạn nội tuyến SVG và tùy chỉnh các kiểu của nó

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  9 cho phép bạn viết SVG đơn giản trực tiếp trong CSS của bạn

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  00 để sử dụng định dạng hình ảnh WebP trong nền CSS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  01 để sử dụng định dạng hình ảnh AVIF trong nền CSS

xơ vải

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  02 là một kẻ nói dối biểu định kiểu mô-đun

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  03 là công cụ tự động định dạng CSS theo quy tắc

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  02

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  05 lints CSS để hỗ trợ trình duyệt, sử dụng dữ liệu từ Can I Use

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  06 giúp bạn duy trì bảng màu nhất quán

Khác

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  07 là một công cụ khai thác CSS mô-đun

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  08 là một hệ thống lưới

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  09 giàu tính năng

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  0 kiểu gương cho ngôn ngữ từ phải sang trái

cú pháp

PostCSS có thể chuyển đổi kiểu theo bất kỳ cú pháp nào, không chỉ CSS. Nếu cú ​​pháp yêu thích của bạn chưa được hỗ trợ, bạn có thể viết một trình phân tích cú pháp và/hoặc trình xâu chuỗi để mở rộng PostCSS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  1 là một cú pháp dựa trên thụt lề như Sass hoặc Stylus

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  2 chuyển đổi cú pháp tự động bằng phần mở rộng tập tin

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  3 kiểu phân tích cú pháp trong

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  4 thẻ của các tệp giống như HTML

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  5 kiểu phân tích cú pháp trong khối mã của tệp Markdown

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  6 phân tích cú pháp CSS trong mẫu/đối tượng bằng chữ của tệp nguồn

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  7 phân tích cú pháp CSS bằng chữ mẫu của tệp nguồn

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  8 cho phép bạn làm việc với SCSS (nhưng không biên dịch SCSS thành CSS)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  9 cho phép bạn làm việc với Sass (nhưng không biên dịch Sass thành CSS)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  00 cho phép bạn làm việc với Ít hơn (nhưng không biên dịch LESS thành CSS)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  01 cho phép bạn làm việc với Ít hơn (và KHÔNG biên dịch LESS thành CSS bằng cách sử dụng đúng Ít hơn. đánh giá js)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  02 cho phép bạn viết các kiểu trong JS hoặc chuyển đổi Kiểu nội tuyến React, Radium hoặc JSS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  03 tìm và sửa các lỗi cú pháp CSS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  04 chuyển đổi chuỗi CSS thành HTML được đánh dấu

Bài viết

• Một số điều bạn có thể nghĩ về PostCSS… và bạn có thể sai
• PostCSS thực sự là gì;
• Hướng dẫn PostCSS

Bạn có thể tìm thấy nhiều bài báo và video khác trên danh sách awesome-postcss

Sách

• Làm chủ PostCSS cho thiết kế web của Alex Libby, Packt. (Tháng 6 năm 2016)

Cách sử dụng

Bạn có thể bắt đầu sử dụng PostCSS chỉ trong hai bước

1. Tìm và thêm tiện ích mở rộng PostCSS cho công cụ xây dựng của bạn
2. Chọn plugin và thêm chúng vào quy trình PostCSS của bạn

CSS-in-JS

Cách tốt nhất để sử dụng PostCSS với CSS-in-JS là

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

05. Thêm trình tải của nó vào

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

06 của bạn

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

7

Sau đó tạo

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

07

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

Bưu kiện

Bưu kiện có hỗ trợ PostCSS tích hợp. Nó đã sử dụng Autoprefixer và cssnano. Nếu bạn muốn thay đổi plugin, hãy tạo

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

07 trong thư mục gốc của dự án

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

Parcel thậm chí sẽ tự động cài đặt các plugin này cho bạn

Vui lòng lưu ý một số vấn đề trong Phiên bản 1. Lưu ý, Phiên bản 2 có thể giải quyết các vấn đề thông qua vấn đề #2157

gói web

Sử dụng

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

09 trong

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

06

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

0

Sau đó tạo

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

07

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

Nuốt chửng

Sử dụng

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

72 và

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

73

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

0

tập lệnh npm

Để sử dụng PostCSS từ giao diện dòng lệnh của bạn hoặc với các tập lệnh npm, có

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

74

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

7

trình duyệt

Nếu bạn muốn biên dịch chuỗi CSS trong trình duyệt (ví dụ: trong các công cụ chỉnh sửa trực tiếp như CodePen), chỉ cần sử dụng Browserify hoặc webpack. Họ sẽ đóng gói các tệp PostCSS và plugin thành một tệp duy nhất

Để áp dụng các plugin PostCSS cho React Inline Styles, JSS, Radium và CSS-in-JS khác, bạn có thể sử dụng các đối tượng kiểu

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

02 và transforms

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

3

người chạy

• Tiếng càu nhàu.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  76
• HTML.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  77
• bút cảm ứng.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  78
• Tổng số.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  79
• bữa nửa buổi.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  30
• Bông cải xanh.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  31
• sao băng.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  32
• ENB.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  33
• nhiệm vụ.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  34
• Bắt đầu.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  35
• Kết nối/Tốc hành.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  36
• Bộ tiền xử lý mảnh mai.

  module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  37

API JS

Đối với các môi trường khác, bạn có thể sử dụng API JS

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

6

Đọc tài liệu PostCSS API để biết thêm chi tiết về JS API

Tất cả người chạy PostCSS phải vượt qua Nguyên tắc dành cho người chạy PostCSS

Tùy chọn

Hầu hết các trình chạy PostCSS chấp nhận hai tham số

• Một loạt các plugin
• Một đối tượng của các tùy chọn

tùy chọn phổ biến

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  38. một đối tượng cung cấp trình phân tích cú pháp và trình xâu chuỗi

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  39. một trình phân tích cú pháp đặc biệt (ví dụ: SCSS)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  60. một trình tạo đầu ra cú pháp đặc biệt (ví dụ: Midas)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  61. tùy chọn bản đồ nguồn

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  62. tên tệp đầu vào (hầu hết người chạy tự động đặt nó)

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  63. tên tệp đầu ra (hầu hết các vận động viên đều đặt tự động)

Coi cảnh báo là lỗi

Trong một số trường hợp, việc xây dựng không thành công dựa trên bất kỳ cảnh báo nào từ PostCSS hoặc một trong các plugin của nó có thể hữu ích. Điều này đảm bảo rằng không có cảnh báo nào không được chú ý và giúp tránh lỗi. Mặc dù không có tùy chọn cho phép coi cảnh báo là lỗi, nhưng có thể dễ dàng thực hiện bằng cách thêm plugin

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

64 vào cuối plugin PostCSS

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

4

Trình chỉnh sửa và tích hợp IDE

Mã VS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  65 thêm hỗ trợ PostCSS

nguyên tử

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  66 thêm điểm nổi bật của PostCSS và SugarSS

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  67 xem trước CSS đầu ra của bạn trong một khung trực tiếp, riêng biệt

Văn bản tuyệt vời

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  68 thêm điểm nổi bật PostCSS

vim

• module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-nested')
    ]
  }

  69 thêm điểm nổi bật PostCSS

WebStorm

Để được hỗ trợ PostCSS trong WebStorm và các IDE JetBrains khác, bạn cần cài đặt plugin này

Liên hệ bảo mật

Để báo cáo lỗ hổng bảo mật, vui lòng sử dụng liên hệ bảo mật Tidelift. Tidelift sẽ phối hợp khắc phục và tiết lộ

Dành cho doanh nghiệp

Có sẵn như là một phần của Đăng ký Tidelift

Những người bảo trì của

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

32 và hàng nghìn gói khác đang làm việc với Tidelift để cung cấp hỗ trợ thương mại và bảo trì cho các phần phụ thuộc nguồn mở mà bạn sử dụng để xây dựng các ứng dụng của mình. Tiết kiệm thời gian, giảm rủi ro và cải thiện tình trạng của mã, đồng thời trả tiền cho người duy trì chính xác các phụ thuộc mà bạn sử dụng. Tìm hiểu thêm

Trình tải PostCSS dùng để làm gì?

PostCSS có còn phù hợp không?

PostCSS có phải là một khung không?

Tôi nên sử dụng PostCSS hay Sass?