Ở đâ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 SassHướ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ộcBiê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ụngnpm 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ểnCó 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 tinBạ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óinpm install -g sass
Biên dịch mã Sass
npm install -g sass
8 vớisass [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 đổiPhiê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
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
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
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ệpnpm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer
8 hợp lệnpm install -g sass
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úngCấ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
- phân tích cú pháp
1"browserslist": [ "> 2%" ],
- đầu ra tới
2"browserslist": [ "> 2%" ],
- đặt biến môi trường
3 thành"browserslist": [ "> 2%" ],
4"browserslist": [ "> 2%" ],
- xuất ra một tệp bản đồ nguồn bên ngoài
- đặt đầu ra dài dòng và thông báo lỗi
- đặt trình phân tích cú pháp
5 Sass và"browserslist": [ "> 2%" ],
- sử dụng các plugin
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ố"browserslist": [ "> 2%" ],
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 đổiTạ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ổ sungCá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
0Bạ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ôngnpm run css:watch
1Hà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àinpm run css:watch
2PostCSS hiện có thể được chạy bằng lệnh ngắn hơn
npm run css:watch
3Dưới đây là một số điều cần lưu ý
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// root Sass file // src/scss/main.scss @import '_variables'; @import '_reset'; @import 'components/_card'; // etc.
- Phân tích cú pháp Sass chỉ được áp dụng khi đầu vào là tệp
8. Mặt khác, nó mặc định là CSS tiêu chuẩnnpm install -g sass
- Bản đồ nguồn chỉ xuất ra khi
2 được đặt thànhnpx postcss ./src/scss/main.scss \ --output ./build/css/main.css \ --env development \ --map \ --verbose \ --parser postcss-scss \ --use postcss-advanced-variables postcss-nested autoprefixer
4"browserslist": [ "> 2%" ],
7 vẫn có thể được thêm vào để tự động biên dịchsass [input.scss] [output.css]
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ọinpm run css:watch
4Thê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 SassSử 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
5Sau đó 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
6Plugin 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
7Sau đó, 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
8Trong 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 ...
};
6Thê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ênVí 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ênnpm run css:watch
9Sau đó, 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
0Cái nào biên dịch thành CSS
npm run css:build
1Plugin postcss-map-get thêm xử lý bản đồ Sass. Cài đặt nó với
npm run css:build
2Và 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.
2npm run css:build
3Thê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
4có 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
6Sau đó thêm nó vào
// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.
2npm run css:build
7Thê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
8biên dịch thành
npm run css:build
9Cài đặt plugin với
npm install -g sass
0Sau đó 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
02npm install -g sass
1Thê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
2Sau đó 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%"
],
4npm 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
4Trong 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
08Tiế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íchLiê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