BÀI TẬP TIỂU LUẬN TÌM HIỂU VỀ LESS, Cách sử dụng LESS, Cú pháp của LESS

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (318.32 KB, 11 trang )

Nhóm 1
TÌM HIỂU VỀ LESS
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 được phát triển bởi Alexis Sellier, một lập
trìnhviênngườiĐức.
Vớ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
CÁ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>
CÚ PHÁP CỦA LESS
Khai Báo Biến (Variables)
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.
Mixins
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à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
Operation (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;
}
LESS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

BÀI TẬP TIỂU LUẬN TÌM HIỂU VỀ LESS, Cách sử dụng LESS, Cú pháp của LESS

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về