NỘI DUNG• Giới thiệu LESS • Cách sử dụng LESS • Cú pháp của LESS... GIỚI THIỆU LESS• LESS là một ngôn ngữ stylesheet động • LESS là một dạng plugin Javascript tương tác với CSS • LESS đư
Trang 1NHÓM 1
TÌM HIỂU VỀ LESS
Trang 2NỘI DUNG
• Giới thiệu LESS
• Cách sử dụng LESS
• Cú pháp của LESS
Trang 3GIỚI THIỆU LESS
• LESS là một ngôn ngữ stylesheet động
• LESS là một dạng plugin Javascript tương tác với CSS
• LESS được phát triển bởi Alexis Sellier, một lập trình viên người Đức
Trang 4Với LESS thì bạn sẽ tiếp cận một cách viết code CSS theo một cách hoàn toàn khác đó là có thể thêm vào các biến, toán tử, hàm vào CSS
GIỚI THIỆU LESS
Trang 5CÁCH SỬ DỤNG LESS
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>
1 <link rel = “stylesheet/less” type = “text/css”
href = "styles.less" >
2 <script src= "less.js" type= "text/javascript"> </script>
Trang 6CÚ PHÁP CỦA LESS
Khai Báo Biến (Variables)
Trang 7Mixins 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
Mixins
Trang 8hệ thừa kế trong CSS, với Less bạn có thể lồng các selector vào 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
Nested Rules
Trang 9Operation (Toán tử)
Với LESS bạn có thể thực hiện các phép tính như cộng , trừ , nhân chia
@ height : 100px
.element-A { height : @height;
} element-B { height : @height * 2 ; }
Trang 10LESS cũng cung cấp thêm một khái niệm là Scope, nơi mà biến sẽ được thừa hưởng trong phạm vi gần
nó nhất
Scope