Tìm hiểu và sử dụng LESS CSS (phần I)

CSS đã trở quen thuộc với các lập trình viên phát triển Website, bởi nhiều ưu điểm mà nó mang lại : cú pháp đơn giản, dễ học, dễ tiếp cận_..._ Tuy nhiên khi thiết kế một Website lớn với nhiều đoạn mã code thì CSS thuần sẽ trở lên rất bị động:

• Khai báo thành phần này vào thành phần khác.
• Khó dùng lại các thuộc tính giống nhau.
• Khó quản lý khi đoạn mã CSS trở nên quá nhiều.

CSS Preprocessor là giải pháp tối ưu khắc phục các vấn đề trên. Ở phần này chúng ta cùng tìm hiểu về LES CSS (một trong những CSS Preprocessor phổ biến nhất hiện nay).

I - LESS là gì?

Được phát triển bởi lập trình viên người Đức Alexis Sellier và ra đời vào năm 2009, LESS là một CSS preprocessor giúp ngắn gọn và đơn giản hóa các đoạn mã CSS bằng cách thêm vào mã CSS các thành phần mới như : biến, mixins, toán tử và hàm.

Nhờ đó mà việc quản lý các mã CSS cũng trở lên dễ dàng hơn rất nhiều.

II - Cài đặt LESS Preprocessor

• 1. Client – Side

  Trước tiên bạn cần tải về file “less.js” phiên bản mới nhất từ địa chỉ website : http://lesscss.org/#download-options

  Sau đó, tạo file mới có phần mở rộng là '.less' chứa mã LESS CSS của bạn và thêm vào mã code HTML:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

`Lưu ý` : File “**styles.less**” phải được thêm vào trước “**less.js**”

Để Client - side tự động cập nhật khi style có thay đổi bạn cần thêm tính năng “Watch mode” bằng cách thêm '#!watch' vào cuối URL và refresh lại trang

Hoặc thêm lệnh javascript 'less.watch()' vào mã code của trang.

• 2. Server - Side

  LESS được cài đặt dễ dàng trên server bằng cách dùng 'npm'

  $ npm install less

  Sau khi cài đặt thành công bạn có thể gọi thông qua trình biên dịch của npm :

var less = require('less');
less.render('.class { awidth: 5 + 5 }', function (e, css) {
    console.log(css);
});

Kết quả :

.class {
  	awidth: 10;
    }

Hoặc gọi parser và trình biên dịch bằng tay:

var parser = new(less.Parser);
parser.parse('.class { awidth: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

• 3. Cấu hình

  Bạn có thể thêm các tùy chọn cho trình biên dịch như sau:

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Chỉ định đường dẫn cho @import
    filename: 'style.less' // Chỉ định tên tệp .less
});
parser.parse('.class { awidth: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Thu nhỏ (nén) nội dung CSS
});

Less cũng cho phép gọi trình biên dịch từ command-line như sau:

`$ lessc styles.less`

Bạn có thể ghi ra file tùy chọn sau khi biên dịch ghi ra stdout:

`$ lessc styles.less > styles.css`

III - SỬ DỤNG Ngôn ngữ stylesheet "động" – LESS

• 1. Biến

  Ta cùng xem ví dụ sau đây :

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

Kết quả:

#header { color: #6c94be; }

Như vậy thay vì phải dùng mã màu **#5B83AD** ở nhiều nơi thì nay ta có thể gọi nó thông qua biến **@nice-blue** và thực hiện các phép toán tùy chọn, điều này thật rất tiện lợi!

Để tên biến được tường minh, ta có thể định nghĩa các biến với tên kiểu biến:

@foo: “I am foobar.”;

@var: 'foo';

content: @@var;

Kết quả:

content: “I am foobar.”;

`Lưu ý` : Các biến trong LESS là hằng số nên chỉ có thể định nghĩa một lần.

• 2. Mixins

  Trong LESS, có thể thêm một nhóm các thuộc tính của một 'ruleset' này vào trong 'ruleset' kia. Giả sử ta có một class '.bordered':

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

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:

#menu statistic {
  color: #111;
  .bordered;
}
.post kitty {
  color: red;
  .bordered;
}

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

#menu statistic {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post kitty {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

`Lưu ý quan trọng ` : Bất kỳ một lớp hoặc id nào cũng có thể được mixed-in theo cách này.

** - Mixins với tham số**

Khi sử dụng Mixin trong LESS, có thể truyền tham số vào như ví dụ sau:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Sử dụng:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

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

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

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

#header {
  .border-radius;
}

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:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}
pre { .wrap }

Kết quả:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

• 3. 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ẻ:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Kết quả:

box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

_(continue.....)_

_