Loadding..

Tìm hiểu về less và sass css

Tìm hiểu về less và sass css

  • 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.

  • Tài liệu hướng dẫn

LESS trình bày khá chi tiết với vị dụ đơn giản giễ 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ổ xung 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 giễ 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 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 @argumentsgiống như javaScipt.

Vì biến trong Sass có khái niệm listmap 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 mixinkhô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.

 

-Tổng kêt:

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.

Print
Tags:

Image

enqtran

I'm enqtran - A coder and blogger :) [email protected]