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

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 . 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 . 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& quot;> 2 <script src=" ;less. js" type="text/javascript"></script> CÚ PHÁP CỦA LESS Khai Báo Biến

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

Thông tin tài liệu

Từ khóa liên quan

Mục lục

Slide 1

NỘI DUNG

GIỚI THIỆU LESS

Slide 4

CÁCH SỬ DỤNG LESS

CÚ PHÁP CỦA LESS

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Tài liệu cùng người dùng

Tài liệu liên quan