LESS: Lập trình CSS linh động và nâng cao

5/14/2014 11:12:48 PM | Danh mục : HTML & CSS

Lập trình CSS theo kiểu thông thường khá đơn giản, bạn chỉ cần tham chiếu đến một đối tượng thẻ, id hay class trong nội dung HTML và chỉ định các đặc tính cho nó. Tuy nhiên với các trang lớn, khi viết CSS bạn sẽ thấy mình lặp đi lặp lại nhiều đoạn đã viết rồi. Như vậy rõ ràng bạn có thề dùng cách viết tắt ngắn gọn hơn để tiết kiệm số dòng mã, tối ưu hóa về tốc độ load cho trang web. Nhưng để phát triển hơn thế nữa, bạn cần có sự hỗ trợ của các biến, các điều kiện, vòng lặp hoặc thậm chí là các functions.

Nếu bạn muốn thực hiện điều đó, hãy thử dùng LESS. LESS là một dạng plugin Javascript tương tác với CSS. Nó sẽ cho phép bạn viết CSS với các cấu trúc lệnh mở và nâng cao hơn. Hoặc nó có thể biên dịch (compile) mã LESS sang CSS thông thường. Hiện tại LESS hỗ trợ biến, các quy tắc lồng nhau.

Cài đặt LESS cho client:

Tải về file less.js tại trang chủ lesscss.org
Cấu hình LESS file của bạn như CSS thông thường:

1	`<link` `rel="stylesheet/less"` `type="text/css"` `href="styles.less">`

Cấu hình Javascript đến less.js

1	`<script` `src="less.js"` `type="text/javascript"></script>`

Lưu ý tất cả các file stylesheets phải nằm trước phần cấu hình less.js

Cài đặt LESS cho server để biên dịch LESS thành CSS:

Có thể cài đặt nhanh chóng với lệnh:

1	`#npm install less`

Để biên dịch, ta dùng cú pháp như sau:

1	`#lessc styles.less > styles.css`

Sau khi biên dịch ta sẽ được file css thông thường theo chuẩn CSS hiện tại.

Một số ví dụ về cấu trúc cú pháp của LESS:

								// LESS

								.rounded-corners (@radius: 5px) {

								   border-radius: @radius;

								   -webkit-border-radius: @radius;

								   -moz-border-radius: @radius;

								}

								#header {

								   .rounded-corners;

								}

								#footer {

								   .rounded-corners(10px);

								}

Tương tự với đoạn CSS sau:

								/* Compiled CSS */

								#header {

								   border-radius: 5px;

								   -webkit-border-radius: 5px;

								   -moz-border-radius: 5px;

								}

								#footer {

								   border-radius: 10px;

								   -webkit-border-radius: 10px;

								   -moz-border-radius: 10px;

								}

Ngoài ra các bạn có thể tham khảo thêm thông tin cũng như các tài liệu sử dụng tại trang chủ lesscss.org. Hy vọng đây sẽ là một giải pháp để tiết kiệm thời gian, dung lượng mã nguồn cho bạn.