PostCSS có tốt hơn Sass không?

Ở đây chúng tôi so sánh giữa less, node-sass, postcss và sass. Trong phần so sánh này, chúng tôi sẽ tập trung vào các phiên bản mới nhất của các gói đó. Các phiên bản hiện tại ít hơn 4. 1. 3, nút-sass 8. 0. 0, postcss 8. 4. 21 và sass 1. 57. 1

ít hơn, CSS tinh gọn hơn. Nó được tác giả vào ngày 1 tháng 1 năm 2011
nút-sass, Trình bao quanh libsass. Nó được tác giả trên Tháng sáu, 2012
postcss, Công cụ chuyển đổi phong cách với các plugin JS. Nó được tác giả vào ngày 11 tháng 11 năm 2013
sass, Một triển khai JavaScript thuần túy của Sass. Nó được tác giả vào ngày 06/06/2017

Khi so sánh các gói đó, bạn nhận thấy rằng postcss là gói phổ biến hơn hiện nay (27.120 Sao trên Github)
less đã tồn tại lâu hơn (từ 12 năm trước), nó cũng có cộng đồng người bảo trì lớn hơn, nhiều người theo dõi hơn trên Github và nhiều nhánh hơn
postcss có nhiều phiên bản hơn, nhiều lượt tải xuống hàng ngày hơn, nhiều lượt tải xuống hàng tuần hơn, nhiều lượt tải xuống hàng tháng hơn, ít sự cố mở hơn, ít yêu cầu kéo mở hơn và nhiều sao hơn trên Github
sass có nhiều cập nhật thường xuyên hơn

Trong bài đánh giá của chúng tôi, less có 11.462.069 điểm, node-sass có 7.085.955 điểm, postcss có 172.560.428 điểm và sass có 24.482.282 điểm. Các điểm là một bản tóm tắt về mức độ lớn của cộng đồng và gói được duy trì tốt như thế nào

Hãy tìm hiểu sâu hơn và xem xét một số chi tiết khác về các gói đó

Các nhà phát triển web yêu thích bộ tiền xử lý Sass CSS. Theo ý kiến ​​​​của Sass trong Khảo sát trạng thái CSS, mọi nhà phát triển đều biết nó là gì, 89% sử dụng nó thường xuyên và 88% có mức độ hài lòng cao

Nhiều gói web bao gồm xử lý Sass, nhưng bạn cũng có thể đang sử dụng PostCSS mà không nhận ra điều đó. PostCSS chủ yếu được biết đến với plugin Autoprefixer, tự động thêm tiền tố nhà cung cấp

npm install -g sass

5,

npm install -g sass

6 và

npm install -g sass

7 vào thuộc tính CSS khi được yêu cầu. Hệ thống plugin của nó có nghĩa là nó có thể làm được nhiều hơn thế… chẳng hạn như biên dịch các tệp

npm install -g sass

8 mà không cần phải sử dụng trình biên dịch Sass

Hướng dẫn này giải thích cách tạo bộ tiền xử lý CSS tùy chỉnh để biên dịch cú pháp Sass và bổ sung cho nó các tính năng khác. Nó lý tưởng cho bất kỳ ai có yêu cầu CSS cụ thể và biết một chút về Node. js

Bắt đầu nhanh

Một dự án PostCSS ví dụ có thể được sao chép từ GitHub. Nó yêu cầu nút. js, vì vậy hãy chạy

npm install -g sass

9 để tìm nạp tất cả các phụ thuộc

Biên dịch trình diễn mã nguồn

sass [input.scss] [output.css]

0 thành

sass [input.scss] [output.css]

1 bằng cách sử dụng

npm run css:dev

Tự động biên dịch bất cứ khi nào tệp được thay đổi bằng cách sử dụng

________số 8_______

Sau đó thoát xem bằng cách nhấn Ctrl. Cmd + C trong thiết bị đầu cuối

Cả hai tùy chọn cũng tạo một bản đồ nguồn tại

sass [input.scss] [output.css]

2, tham chiếu các tệp nguồn gốc trong công cụ dành cho nhà phát triển

Có thể biên dịch CSS rút gọn ở cấp độ sản xuất mà không có bản đồ nguồn bằng cách sử dụng

npm run css:build

Tham khảo tệp

sass [input.scss] [output.css]

3 để biết thêm thông tin

Bạn có nên thay thế Sass bằng PostCSS?

Không có gì sai với trình biên dịch Sass, nhưng hãy xem xét các yếu tố sau

Phụ thuộc mô-đun

Phiên bản Dart mới nhất của Sass có thể được cài đặt trên toàn cầu bằng Node. js

sass [input.scss] [output.css]

4 trình quản lý gói

npm install -g sass

Biên dịch mã Sass

npm install -g sass

8 với

sass [input.scss] [output.css]

Bản đồ nguồn được tạo tự động (_______5_______6 sẽ tắt chúng) hoặc có thể thêm

sass [input.scss] [output.css]

7 vào tệp nguồn tự động biên dịch khi chúng thay đổi

Phiên bản mới nhất của Sass yêu cầu ít hơn 5 MB dung lượng cài đặt

PostCSS sẽ yêu cầu ít tài nguyên hơn và trình biên dịch giống như Sass cơ bản với tiền tố tự động và quá trình thu nhỏ cần ít hơn 1MB dung lượng. Trên thực tế, thư mục

sass [input.scss] [output.css]

8 của bạn sẽ mở rộng lên hơn 60 MB và tăng lên nhanh chóng khi có thêm nhiều plugin. Điều này chủ yếu là

sass [input.scss] [output.css]

4 cài đặt các phụ thuộc khác. Mặc dù PostCSS có thể không sử dụng chúng, nhưng nó không thể được coi là một giải pháp thay thế nhẹ

Tuy nhiên, nếu bạn đã sử dụng PostCSS cho Autoprefixer hoặc các mục đích khác, Sass có thể không cần thiết

Tốc độ xử lý

Trình biên dịch Sass chậm, dựa trên Ruby đã biến mất từ ​​​​lâu và phiên bản mới nhất sử dụng thời gian chạy Dart được biên dịch. nó nhanh

PostCSS là JavaScript thuần túy và mặc dù các điểm chuẩn sẽ khác nhau, nhưng nó có thể chậm hơn ba lần khi biên dịch cùng một mã nguồn

Tuy nhiên, sự khác biệt về tốc độ này sẽ ít được chú ý hơn nếu bạn đang chạy PostCSS sau Sass. Quy trình hai giai đoạn có thể chậm hơn so với chỉ sử dụng PostCSS, vì phần lớn công việc của nó liên quan đến việc mã hóa các thuộc tính CSS

tùy biến

Ngôn ngữ Sass bao gồm một tập hợp lớn các tính năng bao gồm các biến, lồng nhau, một phần, mixin, v.v. Có những nhược điểm

1. Bạn không thể dễ dàng thêm các tính năng mới

   Có lẽ bạn muốn có một tùy chọn chuyển đổi màu HSLA sang RGB. Có thể viết một chức năng tùy chỉnh, nhưng các yêu cầu khác sẽ không thể thực hiện được — chẳng hạn như đặt SVG làm hình nền

2. Bạn không thể dễ dàng hạn chế bộ tính năng

   Có lẽ bạn muốn nhóm của mình không sử dụng lồng nhau hoặc

   npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer
   

   0. Các quy tắc linting sẽ hữu ích, nhưng chúng sẽ không ngăn Sass biên dịch các tệp

   npm install -g sass
   

   8 hợp lệ

PostCSS có thể cấu hình nhiều hơn đáng kể

Về bản thân, PostCSS không làm gì cả. Chức năng xử lý yêu cầu một hoặc nhiều plugin có sẵn. Hầu hết thực hiện một tác vụ duy nhất, vì vậy nếu bạn không muốn lồng nhau, đừng thêm plugin lồng nhau. Nếu cần, bạn có thể viết các plugin của riêng mình trong một mô-đun JavaScript tiêu chuẩn có thể khai thác sức mạnh của Node. js

Cài đặt PostCSS

PostCSS có thể được sử dụng với , nhưng hướng dẫn này chỉ ra cách chạy nó từ dòng lệnh

Nếu cần, hãy khởi tạo một Nút mới. dự án js với

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

2. Thiết lập PostCSS bằng cách cài đặt các mô-đun sau để phân tích cú pháp cơ bản

npm install -g sass

8 với các phần bổ sung cho các phần, biến, mixin, lồng và tự động thêm tiền tố

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

Giống như dự án ví dụ, PostCSS và các plugin của nó được cài đặt cục bộ. Đây là một tùy chọn thiết thực nếu các dự án của bạn có thể có các yêu cầu biên dịch khác nhau

Ghi chú. PostCSS chỉ có thể được chạy từ tệp JavaScript, nhưng mô-đun

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

4 cung cấp trình bao bọc có thể được gọi từ dòng lệnh. Mô-đun postcss-scss cho phép PostCSS đọc các tệp

npm install -g sass

8 nhưng không chuyển đổi chúng

Cấu hình bộ tiền tố tự động

Autoprefixer sử dụng danh sách trình duyệt để xác định tiền tố của nhà cung cấp nào được yêu cầu theo danh sách các trình duyệt được hỗ trợ của bạn. Dễ dàng nhất để xác định danh sách này là một mảng

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

6 trong

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

7. Ví dụ sau thêm tiền tố của nhà cung cấp khi bất kỳ trình duyệt nào có ít nhất 2% thị phần

"browserslist": [
  "> 2%"
],

Bản dựng đầu tiên của bạn

Thông thường, bạn sẽ có một tệp Sass gốc duy nhất

npm install -g sass

8 để nhập tất cả các tệp một phần/thành phần được yêu cầu. Ví dụ

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

Quá trình biên dịch có thể được bắt đầu bằng cách chạy

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

9, theo sau là tệp đầu vào, tệp

"browserslist": [
  "> 2%"
],

0 và bất kỳ tùy chọn bắt buộc nào. Ví dụ

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

lệnh này

1. phân tích cú pháp

   "browserslist": [
     "> 2%"
   ],
   

   1
2. đầu ra tới

   "browserslist": [
     "> 2%"
   ],
   

   2
3. đặt biến môi trường

   "browserslist": [
     "> 2%"
   ],
   

   3 thành

   "browserslist": [
     "> 2%"
   ],
   

   4
4. xuất ra một tệp bản đồ nguồn bên ngoài
5. đặt đầu ra dài dòng và thông báo lỗi
6. đặt trình phân tích cú pháp

   "browserslist": [
     "> 2%"
   ],
   

   5 Sass và
7. sử dụng các plugin

   "browserslist": [
     "> 2%"
   ],
   

   6,

   "browserslist": [
     "> 2%"
   ],
   

   7 và

   "browserslist": [
     "> 2%"
   ],
   

   8 để xử lý các phần, biến, mixin, lồng và tự động thêm tiền tố

Theo tùy chọn, bạn có thể thêm

sass [input.scss] [output.css]

7 để tự động biên dịch khi tệp

npm install -g sass

8 được sửa đổi

Tạo tệp cấu hình PostCSS

Dòng lệnh nhanh chóng trở nên khó sử dụng đối với danh sách plugin dài hơn. Bạn có thể định nghĩa nó dưới dạng tập lệnh

sass [input.scss] [output.css]

4, nhưng tệp cấu hình PostCSS là tùy chọn dễ dàng hơn cung cấp các khả năng bổ sung

Các tệp cấu hình PostCSS là các tệp mô-đun JavaScript có tên

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

2 và thường được lưu trữ trong thư mục gốc của dự án (hoặc bất kỳ thư mục nào bạn chạy PostCSS từ đó). Mô-đun phải

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

3 một chức năng duy nhất

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

Nó đã truyền một đối tượng

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

4 với các thuộc tính được thiết lập bởi lệnh

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

5. Ví dụ

npm run css:watch

0

Bạn có thể kiểm tra các thuộc tính này và phản ứng tương ứng — ví dụ: xác định xem bạn có đang chạy ở chế độ

"browserslist": [
  "> 2%"
],

4 và xử lý tệp đầu vào

npm install -g sass

8 hay không

npm run css:watch

1

Hàm phải trả về một đối tượng có tên thuộc tính khớp với các tùy chọn dòng lệnh

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

4. Tệp cấu hình sau đây sao chép tệp dài

npm run css:watch

2

PostCSS hiện có thể được chạy bằng lệnh ngắn hơn

npm run css:watch

3

Dưới đây là một số điều cần lưu ý

• // root Sass file
  // src/scss/main.scss
  @import '_variables';
  @import '_reset';
  @import 'components/_card';
  // etc.
  

  9 là tùy chọn. nó không được đặt trong

  // root Sass file
  // src/scss/main.scss
  @import '_variables';
  @import '_reset';
  @import 'components/_card';
  // etc.
  

  2
• Phân tích cú pháp Sass chỉ được áp dụng khi đầu vào là tệp

  npm install -g sass
  

  8. Mặt khác, nó mặc định là CSS tiêu chuẩn
• Bản đồ nguồn chỉ xuất ra khi

  npx postcss ./src/scss/main.scss \
      --output ./build/css/main.css \
      --env development \
      --map \
      --verbose \
      --parser postcss-scss \
      --use postcss-advanced-variables postcss-nested autoprefixer
  

  2 được đặt thành

  "browserslist": [
    "> 2%"
  ],
  

  4

• sass [input.scss] [output.css]
  

  7 vẫn có thể được thêm vào để tự động biên dịch

Nếu bạn muốn

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

2 nằm trong một thư mục khác, nó có thể được tham chiếu với tùy chọn

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

6 — chẳng hạn như

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

7. Trong dự án ví dụ, cấu hình ở trên nằm ở

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

8. Nó được tham chiếu bằng cách chạy

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

9, gọi

npm run css:watch

4

Thêm các plugin khác

Các phần sau đây cung cấp các ví dụ về các plugin PostCSS phân tích cú pháp

npm install -g sass

8 bổ sung hoặc cung cấp quá trình xử lý ngoài phạm vi của trình biên dịch Sass

Sử dụng mã thông báo thiết kế

Mã thông báo thiết kế là một cách bất khả tri về công nghệ để lưu trữ các biến như phông chữ, màu sắc, khoảng cách, v.v. Bạn có thể lưu trữ các cặp giá trị-tên mã thông báo trong tệp JSON

npm run css:watch

5

Sau đó tham khảo chúng trong bất kỳ trang web, Windows, macOS, iOS, Linux, Android hoặc ứng dụng nào khác

Mã thông báo thiết kế không được Sass hỗ trợ trực tiếp, nhưng một đối tượng JavaScript có thuộc tính

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

1 chứa các cặp tên–giá trị có thể được chuyển đến plugin PostCSS postcss-advanced-variables hiện có

npm run css:watch

6

Plugin chuyển đổi tất cả các giá trị thành Sass toàn cầu

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

2 có thể được sử dụng trong bất kỳ phần nào. Giá trị dự phòng có thể được đặt để đảm bảo một biến có sẵn ngay cả khi nó bị thiếu từ

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

3. Ví dụ

npm run css:watch

7

Sau đó, các biến mã thông báo có thể được tham chiếu trong bất kỳ tệp

npm install -g sass

8 nào. Ví dụ

npm run css:watch

8

Trong dự án ví dụ, tệp

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

5 được xác định, được tải và sử dụng khi chạy

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

6

Thêm hỗ trợ bản đồ Sass

Sass Maps là các đối tượng khóa-giá trị. Hàm

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

7 có thể tra cứu các giá trị theo tên

Ví dụ sau xác định các điểm dừng truy vấn phương tiện dưới dạng bản đồ Sass với hỗn hợp

// postcss.config.js
module.exports = cfg => {

  // .. configuration ...

};

8 để tìm nạp giá trị được đặt tên

npm run css:watch

9

Sau đó, các thuộc tính mặc định và sửa đổi truy vấn phương tiện có thể được xác định trong cùng một bộ chọn. Ví dụ

npm run css:build

0

Cái nào biên dịch thành CSS

npm run css:build

1

Plugin postcss-map-get thêm xử lý bản đồ Sass. Cài đặt nó với

npm run css:build

2

Và cập nhật tệp cấu hình

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

2

npm run css:build

3

Thêm Tối ưu hóa truy vấn phương tiện

Vì chúng tôi đã thêm các truy vấn phương tiện nên sẽ hữu ích khi kết hợp và sắp xếp chúng theo thứ tự ưu tiên trên thiết bị di động. Ví dụ: CSS sau

npm run css:build

4

có thể được hợp nhất để trở thành

npm run css:build

5

Điều này không thể thực hiện được trong Sass, nhưng có thể đạt được với plugin PostCSS postcss-sort-media-queries. Cài đặt nó với

npm run css:build

6

Sau đó thêm nó vào

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

2

npm run css:build

7

Thêm xử lý nội dung

Quản lý nội dung không khả dụng trong Sass, nhưng nội dung postcss giúp bạn dễ dàng. Plugin giải quyết các URL hình ảnh CSS, thêm truy xuất bộ đệm, xác định kích thước hình ảnh và nội tuyến các tệp bằng ký hiệu base64. Ví dụ

npm run css:build

8

biên dịch thành

npm run css:build

9

Cài đặt plugin với

npm install -g sass

0

Sau đó thêm nó vào

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

2. Trong trường hợp này, plugin được hướng dẫn xác định vị trí hình ảnh trong thư mục

npm run css:watch

02

npm install -g sass

1

Thêm thu nhỏ

cssnano đặt tiêu chuẩn cho việc thu nhỏ CSS. Việc thu nhỏ có thể mất nhiều thời gian xử lý hơn so với các plugin khác, vì vậy nó chỉ có thể được áp dụng trong sản xuất

Cài đặt cssnano với

npm install -g sass

2

Sau đó thêm nó vào

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

2. Trong trường hợp này, quá trình thu nhỏ chỉ xảy ra khi

"browserslist": [
  "> 2%"
],

3 được đặt thành bất kỳ giá trị nào khác ngoài

"browserslist": [
  "> 2%"
],

4

npm install -g sass

3

Đặt

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

2 thành

npm run css:watch

07 sẽ kích hoạt quá trình thu nhỏ (và xóa bản đồ nguồn)

npm install -g sass

4

Trong dự án ví dụ, CSS sản xuất có thể được biên dịch bằng cách chạy

npm run css:watch

08

Tiến tới PostCSS?

PostCSS là một công cụ mạnh mẽ và có thể định cấu hình, có thể biên dịch các tệp

npm install -g sass

8 và nâng cao (hoặc hạn chế) ngôn ngữ Sass tiêu chuẩn. Nếu bạn đang sử dụng PostCSS cho Autoprefixer, bạn có thể xóa hoàn toàn trình biên dịch Sass trong khi vẫn giữ nguyên cú pháp mà bạn yêu thích

Liên kết khác

• Tham khảo ngôn ngữ Sass
• Trang chủ PostCSS
• Danh sách plugin PostCSS
• danh mục có thể tìm kiếm của các plugin PostCSS
• plugin PostCSS trên npmjs. com
• Viết plugin PostCSS
• PostCSS CLI

Chia sẻ bài viết này

Craig Buckler

Craig là một nhà tư vấn web tự do ở Vương quốc Anh, người đã xây dựng trang đầu tiên của mình cho IE2. 0 vào năm 1995. Kể từ thời điểm đó, anh ấy đã ủng hộ các tiêu chuẩn, khả năng truy cập và các kỹ thuật HTML5 thực hành tốt nhất. Anh ấy đã tạo các thông số kỹ thuật doanh nghiệp, trang web và ứng dụng trực tuyến cho các công ty và tổ chức bao gồm Nghị viện Vương quốc Anh, Nghị viện Châu Âu, Bộ Năng lượng & Biến đổi Khí hậu, Microsoft, v.v. Anh ấy đã viết hơn 1.000 bài báo cho SitePoint và bạn có thể tìm thấy anh ấy @craigbuckler

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

Tôi có nên sử dụng PostCSS không?

SASS hay SCSS hay LESS tốt hơn?

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