Less Css là gì?
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 ...
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”:
|
1 2 3 |
<link rel="stylesheet/less" type="text/css" href="styles.less"> |
Thêm file less.js vào thẻ <head> như sau:
|
1 2 3 |
<script src="less.js" type="text/javascript"></script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.class1 { background-color: #2d5e8b; } .class2 { background-color: #fff; color: #2d5e8b; } .class3 { border: 1px solid #2d5e8b; } |
LESS css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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:
|
1 2 3 4 5 6 7 8 |
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } |
Biên dịch css
|
1 2 3 4 5 |
#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:
|
1 2 3 4 5 6 7 8 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 11 |
#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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#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
|
1 2 3 4 5 6 7 8 9 |
# 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ố:
|
1 2 3 4 5 6 7 |
.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:
|
1 2 3 4 5 6 |
# 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.
|
1 2 3 4 5 6 7 8 9 10 |
.wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } pre { .wrap } |
kết quả
|
1 2 3 4 5 6 7 8 |
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ẻ:
|
1 2 3 4 5 6 7 8 |
.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ả
|
1 2 3 4 5 |
box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// LESS # header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-awidth: 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
# header h1 { font-size: 26px; font-weight: bold; } # header p { font-size: 12px; } # header p a { text-decoration: none; } # header p a:hover { border-awidth: 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:
|
1 2 3 4 5 6 7 8 9 10 |
.bordered { &.float { float: left; } .top { margin: 5px; } } |
Kết quả
|
1 2 3 4 5 6 7 8 |
.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.
