Less css
Bài đăng này đã không được cập nhật trong 3 năm
I. 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.
II. 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”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
Thêm file less.js vào thẻ <head> như sau:
<script src="less.js" type="text/javascript"></script>
Phải chắc chắn rằng file .less được đặt trước less.js.
III. 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.
.class1 {
background-color: #2d5e8b;
}
.class2 {
background-color: #fff;
color: #2d5e8b;
}
.class3 {
border: 1px solid #2d5e8b;
}
LESS css
@color: #2d5e8b;
.class1 {
background-color: @color;
}
.class2 {
background-color: #fff;
color: @color;
}
.class3 {
border: 1px solid @color;
}
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:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
Biên dịch css
#header {
color: #6c94be;
}
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:
// LESS
.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, như sau:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
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
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
####3. **Mixins với tham số**
Khi sử dụng Mixin trong LESS, có thể truyền tham số vào như ví dụ sau:
```css
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
Cách 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;
}
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;
** 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.
// LESS
# header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Đ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
# header h1 {
font-size: 26px;
font-weight: bold;
}
# header p {
font-size: 12px;
}
# header p a {
text-decoration: none;
}
# header p a:hover {
border-width: 1px;
}
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:
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
Kết quả
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
####**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.
// 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%);
}
Biên dịch
/* Biên dịch ra CSS */
# header {
color: #333;
border-left: 1px;
border-right: 2px;
}
# footer {
color: #114411;
border-color: #7d2717;
}
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ư:
@var: 1px + 5;
Kết quả sẽ là 6px.
Dấu ngoặc cũng được sử dụng kèm với toán tử:
width: (@var + 5) * 2;
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.
@var: red;
# page {
@var: white;
# header {
color: @var; // white
}
}
# footer {
color: @var; // red
}
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ệ:
@import "lib.less";
@import "lib";
Nếu bạn muốn import một file CSS, chỉ cần thêm đuôi .css:
@import "lib.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() and mix(). Bạn có thể xem chi tiết hơn tại http://lesscss.org/features/#features-overview-feature .
All rights reserved
