Less Css là gì?

896

Nếu là một web dev, chắc hẳn bạn đã quá quen thuộc với CSS. CSS rất đơn giản, dễ học, nhất là với người mới bắt đầu. Tuy nhiên nó cũng có nhược điểm là khá “tĩnh”, điều này dẫn đến việc trong CSS rất khó để dùng lại các thuộc tính, khai báo của thành phần này vào thành phần khác. Đồng thời rất khó quản lý khi các đoạn mã CSS trở nên quá nhiều.

Để khắc phục các nhược điểm của CSS, các CSS preprocessor ra đời. Bài viết này chúng ta sẽ cùng tìm hiểu về LESS, một trong những CSS preprocessor phổ biến nhất hiện nay.

Less là gì?

LESS là một CSS preprocessor, giúp ta viết các đoạn mã CSS đơn giản, ngắn gọn và hiệu quả hơn, đồng thời cũng dễ quản lý hơn bằng cách thêm vào CSS các thành phần động như biến, mixins, toán tử và hàm. LESS được phát triển bởi Alexis Sellier, một lập trình viên người Đức.

Cách sử dụng

Cách sử dụng ở Client-side

Sử dụng LESS thì rất là đơn giản, chúng ta chỉ cần đặt 2 dòng này vào bên trong thẻ <head> là được. Nhưng điều đầu tiên là các bạn phải download less.js về máy của mình.

Link file .less với thuộc tính rel là “stylesheet/less”:

Thêm file less.js vào thẻ <head> như sau:

Phải chắc chắn rằng file .less được đặt trước less.js.

Cú pháp của LESS

Không giống như CSS thông thường, LESS hoạt động như một ngôn ngữ lập trình, nó cũng có khai báo biến, toán tử…

1. Khai Báo Biến (Variables)

CSS bình thường.

LESS css

Ta thấy LESS khai báo biến @color: #2d5e8b; là màu dùng chung cho cả 3 lớp (class). Và với kiểu khai báo thế này, thì chỉ mỗi khi bạn sử dụng , chỉ cần gọi lại biến @color, đồng thời sau này nếu bạn muốn đổi màu thì chỉ cần thay đổi màu tại biến @color-base.

VD:

 

Biên dịch css

 

2. Mixins

Mixins cho phép gắn toàn bộ thuộc tính của một class trong CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia. Nó gần giống với biến, nhưng thay giá trị bằng toàn bộ các thuộc tính của class. Mixins cũng có thể được sử dụng như hàm, bằng cách truyền tham số, như ví dụ dưới đây:

 

Giờ ta muốn sử dụng các thuộc tính của class này ở trong các \’ruleset\’ khác. Để làm được điều này, chỉ cần thêm tên class này vào bên trong bất kỳ \’ruleset\’ nào ta muốn thêm vào, như sau:

 

Các thuộc tính của class .bordered sẽ xuất hiện ở cả #menu a và .post a:

Biên dịch

 

Cách sử dụng

 

Mixins với tham số cũng có thể có giá trị mặc định cho các tham số:

 

Ta có thể gọi mixin này như sau:

 

Nó sẽ thêm vào #header thuộc tính border-radius với giá trị là 5px.

Cũng có thể gọi mixin có tham số mà không truyền tham số vào. Điều này rất hữu dụng khi muốn ẩn mixin đó khi dịch ra CSS mà vẫn muốn chèn các thuộc tính của nó vào \’ruleset\’ khác.

 

kết quả

 

Biến @arguments

Biến @arguments có một ý nghĩa đặc biệt trong mixin, nó chứa giá trị của tất cả các tham số truyền vào mixin. Nó này rất hữu dụng khi bạn không phải muốn làm việc với từng tham số riêng lẻ:

kết quả

 

3. Nested Rules

Thay vì viết các tên selector dài để chỉ ra các quan hệ thừa kế trong CSS, với Less bạn có thể lồng các selector và nhau. Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và code stylesheet cũng ngắn gọn hơn.

Đoạn code trên ngắn gọn hơn và giống với cấu trúc DOM.

Biên dịch ra CSS

 

 

Chú ý rằng dấu & được sử dụng khi bạn muốn gắn selector bên trong với selector ngoài, thay vì coi nó như selector con. Điều này rất quan trọng và được sử dụng với các pseudo-class như :hover và :focus.

VD:

 

 

Kết quả

 

 

4. Hàm & toán tử

Toán tử cho phép cộng, trừ, nhân, chia giá trị của các thuộc tính, màu sắc, làm cho giá trị của các thuộc tính có liên quan tới nhau. Hàm ánh xạ 1-1 với code JavaScript, cho phép thao tác với các giá trị theo bất cứ cách nào bạn muốn.

 

 

Biên dịch

 

 

Less có thể hiểu được sự khác nhau giữa các màu sắc và đơn vị. Nếu đơn vị được sử dụng với toán tử, giống như:

 

 

Dấu ngoặc cũng được sử dụng kèm với toán tử:

 

 

Phạm vi

Phạm vi trong LESS tương tự như trong các ngôn ngữ lập trình. Trình biên dịch sẽ tìm kiếm các biến và mixin đầu tiên trong phạm vi local, và nếu không thấy, nó sẽ tìm ở phạm vi cha, và cứ tiếp tục cho đến khi nào tìm thấy.

 

 

Importing

Bạn có thể import file .less, khi đó tất cả các biến và mixin trong file đó sẽ được thêm vào trong file gọi. Có thể không cần đuôi .less, nên cả hai trường hợp dưới đây đều hợp lệ:

 

 

Nếu bạn muốn import một file CSS, chỉ cần thêm đuôi .css:

Ngoài ra, trong LESS cũng có thể sử dụng hàm, namespace, javascript evaluation,… một số hàm thao tác với màu sắc: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() , spin()mix().

Bạn có thể xem chi tiết hơn tại http://lesscss.org/features/#features-overview-feature .

Nguồn: Viblo