Hướng dẫn Sơ lược và so sánh giữa Less và Sass

[PVS]

Sơ lược và so sánh giữa Less và Sass

Trước khi sử dụng Less hay Sass chúng ta hãy cân nhắc đảm bảo chắc chắn rằng nó có thực sự cần thiết và đảm bảo rằng chúng ta có thể kiểm soát mã CSS được tạo ra tốt, đây là hai ngôn ngữ dùng để mở rộng những giới hạn của CSS giúp ta tổ chức mã CSS của mình. Vậy nên dùng Less hay Sass? hãy sơ lược qua những tính năng của cả hai để đem tới sự lựa chọn phù hợp nhất.

Cách sử dụng
Với LESS họ có 3 cách để sử dụng, cách đơn giản nhất là sử dụng Nodejs với gói LESS, thứ hai là có thế sử dụng trên trình duyệt bằng cách nhúng file js của LESS, cũng có một số trang biên dịch online, thứ ba là dùng trình soạn thảo chuyên để gõ và biên dịch nó, cũng có nhiều editor/IDE với các plugins hỗ trợ biên dịch, xem cụ thể tại đây. Sass cũng vậy nhưng không hỗ trợ quả file js để bỏ vào trình duyệt vì người ta không khuyến khích dùng, Sass được viết trong Ruby nhưng nó cũng có thư viện để chạy trong nodejs hay Python với libSass được viết bằng C. LESS ban đầu cũng được viết trong Ruby nhưng nó đã được chuyển sang javaScript và nó cũng được chuyển tới một vài ngôn ngữ khác được biên dịch trên server với Java, .NET, PHP, Python, Ruby, xem cụ thể tại đây.

Tài liệu hướng dẫn
LESS trình bày khá chi tiết với ví dụ đơn giản dễ hiểu, Sass cũng trình bày đầy đủ nhưng cá nhân thấy thích cách trình bày của LESS hơn.

Các tính năng
Cú pháp của LESS và Sass cũng giống như CSS nhưng được bổ xung thêm các tính năng giống ngôn ngữ lập trình, nhưng Sass có 2 định dạng, đuôi scss thông thường và đuôi sass sử dụng khoảng trắng thụt vào thay cho dấu ngoặc nhọn như CSS thông thường.

Variables
Biến trong LESS sử dụng ký tự '@' viết đầu, Sass sử dụng ký tự '$'. Cả hai đều có những tính năng của biến và có thêm những tính năng như: có thể được sử dụng làm selector, có thể sử dụng trong chuỗi, có thể sử dụng làm thuộc tính. Chỉ khác ở cú pháp sử dụng, với LESS ta dùng '@{biến}' với Sass thì '#{biến}'.

Nested Rules
Đây là tính năng tiêu biểu để viết CSS lồng, cả LESS và Sass có cách thể hiện hoàn toàn giống nhau, đều có thể dùng ký tự '&' sẽ tham chiếu selector cha hoặc sử dụng với các ký tự khác tạo selector, điểm khác là Sass hỗ trợ thêm nested properties trong khi LESS có thể nested các @media lồng nhau còn Sass thì không.

Import
Ngoài khả năng import như CSS thông thường cả hai đều có thể import tập tin của nó mà không cần ghi phần mở rộng. Tuy nhiên LESS đã nhỉnh hơn Sass khi bổ sung thêm tùy chọn keyword cung cấp thêm nhiều tính năng import rất hữu ích xem cụ thể tại đây.

Extend
Với LESS chúng ta có cú pháp là Pseudo-Class ':extend(selector)', với Sass là cú pháp '@extend selector'. Có thể thấy cách viết của Sass là đẹp hơn nhưng LESS đã cải tiến tốt hơn chẳng hạn với Sass để extend nhiều selector thì cần viết thêm '@extend selector' với LESS thì chỉ cần liệt kê các selector bởi dấu phẩy. Thông thường Sass sẽ extend cả pseudo-class như ':hover' và cả các selector kết hợp, với LESS mặc định thì không mà cung cấp thêm từ khóa all ':extend(selector all)' để mở rộng khả năng extend.

Mixin
Với Sass mixin được sử dụng với cú pháp @mixin để khai báo và @include để gọi, so với LESS thì cách của Sass rõ ràng hơn nhưng LESS lại ngắn hơn đôi khi dễ dẫn tới sự lộn xộn vì nó có thể gọi một selector như thường hoặc khi khai báo chỉ cần thêm dấu ngoặc nếu không muốn nó được biên dịch ra CSS. Cả hai đều hỗ trợ các tham số như hàm, tham số cũng có thể xét giá trị mặc định, khi gọi tham số có thể tham chiếu bởi tên hoặc thứ tự giá trị, nhưng với LESS tham số dễ dãi hơn khi có thể kết hợp cả tham chiếu bởi tên và thứ tự giá trị đồng thời các tham số có thể liệt kê bằng dấu phẩy hoặc chấm phẩy hoặc cả hai.

Cả hai đều có tham số đặc biệt nhưng cách thức thì khác nhau với Sass mixin khi khai báo tham số sử dụng một biến kết hợp với dấu ba chấm còn LESS thì bên trong mixin sử dụng tham số đặc biệt @arguments giống như javaScipt. Vì biến trong Sass có khái niệm list, map nên khi gọi mixin ta có thể truyền tham số là map hay list (có thể cả list và map nhưng phải list trước) bằng cách gọi tên biến với 3 chấm. Một điều nữa được Sass bỏ qua là khi 1 mixin được gọi nhiều lần trong cùng selector thì vẫn biên dịch ra hết cho dù trùng lặp các thuộc tính còn LESS sẽ loại những CSS trùng lặp, nhưng việc gọi lại mixin trong cùng selector thường không hay xảy ra. Sass có thêm tính năng chuyển một khối CSS vào trong một mixin không biết tính năng này có thật sự hữu dụng không.

for, each, if, eslse, while
Ở Sass có sự trình bày rõ ràng và khá giống các ngôn ngữ lập trình, LESS không trình bày đề cao cấu trúc như ngôn ngữ lập trình mà chỉ dùng sự kết hợp mixin với từ khóa 'when'. Lợi thế ở sự so sánh này dành cho Sass nhưng thực tế chúng ta thường không cần thiết phải xử lý phức tạp để biên dịch ra CSS.

function
Mặc dù đã có mixin rồi nhưng Sass cũng cung cấp thêm tính năng function có khả năng trả về giá trị, LESS thì không có cái này.

Kết luận
Về cơ bản thì LESS và Sass đều giống nhau chỉ khác ở một số cú pháp, về tính năng cơ bản thì được thiết kế giống nhau, hiện Sass vẫn đang được phát triển trong Ruby còn LESS đã chuyển sang nodejs như vậy về khả năng sử dụng linh hoạt thì LESS có xu thế tốt hơn. LESS viết sau và kế thừa được những thiết kế hay của Sass và cải tiến thêm để sử dụng linh hoạt hơn đồng thời loại bỏ những tính năng không thực sự thu hút. Về thực tế cách viết của LESS sẽ ngắn gọn hơn nhưng cũng dễ rối nếu người dùng mới làm quen, bạn cũng có thể sử dụng Sass trong nodejs với module node-Sass nhưng cá nhân sau khi dùng thử nhận thấy bạn sẽ không nhận được nhiều tính năng có thể biên dịch như Sass trong Ruby, tốt nhất hãy sử dụng môi trường mà ngôn ngữ được phát triển. Dùng cái nào là tùy cấu trúc mà bạn thích, cá nhân mình thích cú pháp và sự mềm dẻo của LESS hơn. Những so sánh sơ lược trên có thể có những chỗ không còn đúng ở những phiên bản sau này của LESS và Sass nhưng về tổng thể thì không có nhiều khác biệt. Ngày nay LESS và Sass được sử dụng rất rộng rãi và đặc biệt hữu dụng để tạo các animation với css.

Chúc các bạn thành công.

Nguồn: sothichweb.com​

 

[trinhha]

LESS và Sass 2 cái này thực tế thì công năng sử dụng của nó thì như nhau. chỉ khác nhau có cú pháp triển khai thôi. anh em cứ thấy cái nào dễ sử dùng thì mình làm cái đó. hay quen với cái nào rồi thì mình làm cái đó anh em nhé. không có gì phải nghĩ đâu