CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này tiếp tục trình biên dịch Sass thế hệ thứ 3: Ruby Sass, Node-Sass và Dart-Sass, được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Để đơn giản hóa việc mô tả kiểu, các trình duyệt đã thiết kế CSS dưới dạng DSL (Ngôn ngữ dành riêng cho miền). CSS viết đơn giản nhưng lại bất tiện về nhiều mặt, ví dụ như nó không hỗ trợ lồng nhau và mã dư thừa; nó không hỗ trợ kế thừa và trộn lẫn, mã không dễ sử dụng lại.

Để mở rộng tổ chức mã và khả năng tính toán động của CSS, một số ngôn ngữ tiền xử lý được biên dịch thành CSS đã xuất hiện trong cộng đồng như sass, less, stylus, v.v.

Ngoài ra, còn có một bộ xử lý hậu kỳ như postcss, biên dịch từ css sang css và thực hiện nhiều phân tích và chuyển đổi khác nhau trong quá trình biên dịch.

Các trình biên dịch less và stylus đều được viết bằng js, nhưng sass là đặc biệt. Không có trình biên dịch thế hệ thứ ba nào được viết bằng js.

Hôm nay, chúng ta sẽ nói về lịch sử của sass: thế hệ thứ ba của trình biên dịch sass.

ruby sass

Sass được Ruby phát triển lần đầu tiên vào năm 2006 dưới dạng ngôn ngữ viết CSS phù hợp với công cụ mẫu Haml của khung web của nó. Bởi vì nó dễ sử dụng hơn nên nó cũng được sử dụng ở mặt trước.

Trình biên dịch sass được phát triển bằng Ruby và Ruby là ngôn ngữ thông dịch, vì vậy nếu các nhà phát triển front-end muốn biên dịch sass, họ cần cài đặt Ruby cục bộ.

Sau này, sự xuất hiện của Node.js đã thúc đẩy sự phát triển của kỹ thuật front-end, tức là sử dụng Node.js để viết chuỗi công cụ biên dịch và đóng gói cho front-end. Node.js chỉ hỗ trợ các gói mở rộng cho các ngôn ngữ biên dịch như c++, không dùng được ruby ​​sass nên node-sass xuất hiện.

Cho đến tháng 3 năm 2019, Ruby Sass tuyên bố sẽ không còn được duy trì nữa và trình biên dịch Sass sớm nhất đã thoát khỏi giai đoạn lịch sử.

nút-sass

Nó sử dụng c++ để triển khai trình biên dịch sass có tên LibSass, được tích hợp với nút và là gói node-sass.

Tất nhiên, nó cũng có thể được tích hợp với các ngôn ngữ khác, chẳng hạn như go, java, v.v.

node-sass cho phép chúng ta biên dịch sass code thông qua API trong Node.js, phù hợp với xu hướng kỹ thuật front-end.

Hơn nữa, node-sass được viết bằng C++ và tốc độ biên dịch nhanh hơn nhiều so với ruby ​​​​sass.

Tuy nhiên, node-sass là mô-đun C++ nên việc cài đặt phải tương ứng với phiên bản nút, nếu không nó sẽ biên dịch và báo lỗi, rắc rối hơn.

Bạn có thể kiểm tra sự tương ứng phiên bản giữa nút và nút-sass trên github:

node-sass trông khá tốt, có tốc độ biên dịch nhanh và hỗ trợ các lệnh gọi Node.js. Mặc dù bạn phải chú ý đến mối quan hệ tương ứng với phiên bản nút nhưng đó không phải là vấn đề lớn.

Tuy nhiên, node-sass đã bị đánh dấu là lỗi thời, điều đó có nghĩa là nó sẽ dần biến mất khỏi giai đoạn lịch sử.

Tại sao?

Chủ yếu là do tốc độ bảo trì không theo kịp.

Giống như TS là siêu bộ của JS, SASS cũng là siêu bộ của CSS. Superset có nghĩa là TS Compiler sẽ hỗ trợ nhiều cú pháp mới khác nhau của JS và SASS cũng sẽ hỗ trợ nhiều cú pháp mới khác nhau của CSS. Trên cơ sở này, nó sẽ lặp lại các cú pháp mà nó thêm vào.

Hai nhà bảo trì chính của nhóm SASS cảm thấy rằng họ không thể theo kịp tốc độ hỗ trợ các tính năng CSS mới và Dart-sass, một trình biên dịch Sass hỗ trợ tốt hơn cho các tính năng CSS mới, đã xuất hiện trong cộng đồng. các tính năng CSS mới Khoảng cách về hỗ trợ ngày càng lớn. Cuối cùng, vào tháng 10 năm 2020, node-sass đã thông báo rằng họ sẽ không hỗ trợ các tính năng mới nữa và đánh dấu nó là lỗi thời.

Trên blog của node-sass có một đoạn như vậy, thể hiện sự bất lực của họ:

Sau nhiều cuộc thảo luận với nhóm cốt lõi của Sass, chúng tôi đi đến kết luận rằng đã đến lúc phải thông báo chính thức rằng LibSass và các gói được xây dựng dựa trên nó (bao gồm cả Node Sass) đã không còn được dùng nữa. Trong một vài năm, rõ ràng là không có đủ băng thông kỹ thuật đằng sau LibSass để cập nhật những phát triển mới nhất trong ngôn ngữ Sass (ví dụ: các tính năng ngôn ngữ mới nhất đã được thêm vào vào tháng 11 năm 2018). Mặc dù chúng tôi muốn thấy sự thay đổi mô hình này, ngay cả công việc xuất sắc của những người đóng góp lâu năm cho LibSass là Michael Mifsud và Marcel Greter cũng không thể theo kịp tốc độ phát triển ngôn ngữ CSS và Sass nhanh chóng.

Theo cách này, node-sass có thể được coi là đã được ra mắt ở giai đoạn lịch sử, nhưng sự đóng góp của nó cho kỹ thuật giao diện người dùng là không thể xóa nhòa.

Chúng ta hãy xem phiên bản kế thừa của trình biên dịch sass: Dart-sass.

phi tiêu-ngu ngốc

Dart-sass chắc chắn là một trình biên dịch sass được viết bằng Dart. Dart là ngôn ngữ lập trình của Flutter và có thể được biên dịch thành js nên npm nó cung cấp là js và không cần phải ràng buộc với phiên bản node như node-sass.

Sau khi tải xuống gói npm, bạn có thể thấy sass.dart.js, được biên dịch bằng Dart:

Vì gói npm của Dart-sass được biên dịch bằng js nên sẽ chậm hơn so với node-sass, nhưng về cơ bản là tốt hơn so với việc hỗ trợ đầy đủ các tính năng của css và vì là gói js nên việc cài đặt rất thuận tiện.

Dart-sass đại diện cho tương lai và cũng là trình biên dịch sass được đề xuất chính thức.

Trình biên dịch sass thế hệ thứ ba

Sau khi giới thiệu ba thế hệ trình biên dịch, chúng ta hãy xem xét ngắn gọn:

Ruby Sass là trình biên dịch Sass sớm nhất, được viết bằng Ruby nên không thể gọi bằng node nhưng nó là trình biên dịch tiên phong và đứng đầu về thành tích lịch sử. Bạn chỉ cần cài đặt Ruby là có thể thực thi được, khá rắc rối.

node-sass là một gói nút xuất hiện để đáp ứng xu hướng kỹ thuật front-end. Nó là sự đóng gói của trình biên dịch sass LibSass được triển khai trong c ++. Bởi vì nó được biên dịch bằng C++ nên nó nhanh hơn. Cung cấp API Node.js, hỗ trợ xu hướng kỹ thuật front-end. Thành tích lịch sử của ông xếp thứ hai. Chỉ là sự tương ứng giữa node-sass và phiên bản nút rắc rối hơn.

Dart-sass là một trình biên dịch sass được triển khai bằng Dart. Gói Dart-sass được cung cấp là js và được biên dịch bởi Dart. Ưu điểm là nó hỗ trợ đầy đủ hơn cho các tính năng CSS mới và không có mối quan hệ ràng buộc nào với phiên bản nút.

Cả Ruby sass và node-sass đều là lịch sử và Dart-sass là tương lai của trình biên dịch sass.

Tóm tắt

CSS thiếu khả năng tổ chức mã và khả năng tính toán động, vì vậy một số bộ tiền xử lý CSS đã xuất hiện trong cộng đồng: sass, less và stylus.

Các trình biên dịch less và stylus đều được viết bằng js. Đặc biệt nhất là sass. Ba thế hệ trình biên dịch của nó đều được viết bằng ruby, c++ và Dart. (Điều này cũng rất đặc biệt trong lĩnh vực kỹ thuật. Trình biên dịch của js đã dần phát triển từ js sang các ngôn ngữ khác như Rust và Go, trong khi trình biên dịch của sass đã dần chuyển từ ngôn ngữ khác trở lại ngôn ngữ được biên dịch vào js ).

Cả Ruby sass và node-sass đều đã lỗi thời, nhưng sự đóng góp của chúng cho kỹ thuật giao diện người dùng là không thể xóa nhòa. Dart-sass đại diện cho tương lai của trình biên dịch sass. Tôi hy vọng nó có thể tiếp nối quá khứ. và làm tốt hơn trong tương lai.

Liên kết gốc: https://mp.weixin.qq.com/s/tP_hXQ5Dc1wPKitTZ095kw.

Cuối cùng, bài viết này về các trình biên dịch Sass thế hệ thứ 3 sẽ tiếp nối quá khứ và mở ra tương lai: Ruby Sass, Node-Sass và Dart-Sass sẽ kết thúc tại đây. Nếu bạn muốn biết thêm về các trình biên dịch Sass thế hệ thứ 3. tiếp nối quá khứ và mở ra tương lai: Ruby Sass, Node- Đối với nội dung Sass và Dart-Sass, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .