Giới thiệu về LESS CSS

<link rel="stylesheet/less" type="text/css" href="styles.less"> // thêm vào trước tập tin JS
<script src="less.js" type="text/javascript"></script>

Cú pháp của LESS

Biến
Việc sử dụng biến cho phép khai báo giá trị được sử dụng nhiều lần, cũng như trong các ngôn ngữ lập trình, bạn có thể gọi và truy xuất giá trị của nó ở bất cứ đâu trong style của bạn.
Ví dụ: biến lưu trữ màu sắc font các thành phần trên website, nếu sử dụng biến thì việc thay đổi giá trị của chúng trở nên rất nhanh và dễ dàng.

// LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

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. Bạn có thể hiểu như việc bạn gọi 1 class đã định nghĩa trước đó trong 1 class bất kỳ nào đang định nghĩa để sử dụng lại các giá trị của chúng.

Mixins cũng có thể được sử dụng như hàm một hàm, bằng cách truyền tham số, như ví dụ dưới đây:

//LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Nested Rules
Thay vì như trước đây, bạn phải xem xét các mối quan hệ giữa các thẻ để viết selector kế thừa trong CSS thì với LESS bạn có thể làm điều đó dễ dàng hơn bằng cách lồng các selector vào nhau (như cấu trúc class trong ngôn ngữ lập trình vậy). Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và viết mã CSS cũng ngắn gọn hơn (ý mình là mã lệnh khi viết LESS nhé ! còn dĩ nhiên sau khi biên dịch thì LESS sẽ chuyển nó về mã CSS thông thường).

// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

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, dài, rộng, làm cho giá trị của các thuộc tính có liên quan tới nhau (ví dụ: xây dựng website đòi hỏi responsive thì hàm và toán tử sẽ thể hiện được tính mềm dẻo của mình).

// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Watch mode

Watch mode là 1 tính năng ở client-side cho phép tự động cập nhật khi có style thay đổi 

Để sử dụng thêm '#!watch' vào phía cuối URL và refresh lại trang. Hoặc cũng có thể dùng lệnh javascript less.watch() vào trang web

Cách sử dụng Server-side

Để sử dụng less trên server-side , chúng ta dùng npm:

$ npm install less

Cụ thể , sau khi cài đặt xong bạn có thể gọi trình biên dịch từ npm như sau:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

Hoặc parse vào trình biên dịch bằng tay 

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

Ngoài ra less còn cho phép gọi trực tiếp từ trình biên dịch file như sau :

$ lessc styles.less

Css đã biên dịch sẽ ghi ra file stdout, bạn có thể ghi nó ra file tùy chọn:

$ lessc styles.less > styles.css

Để tối thiểu dung lượng css , hãy thêm tùy chọn -x. Hoặc nếu muốn tối ưu hơn, có thể sử dụng YUI CSS Compressor với tùy chọn --yui-compress

Bạn có thể tham khảo thêm cách sử dụng và 1 số thuộc tính tại : http://lesscss.org/