css作為一門標記性語言，語法簡單宁舰，學習難度低拼卵，
但CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展蛮艰，不利于復用腋腮，，造成這些困難的很大原因源于CSS是一門非程序式語言壤蚜，沒有變量即寡、函數、SCOPE（作用域）等概念袜刷。LESS 包含一套自定義的語法及一個解析器聪富，用戶根據這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會通過解析器著蟹，編譯生成對應的 CSS 文件墩蔓。
LESS 并沒有裁剪 CSS 原有的特性梢莽，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上奸披，為 CSS 加入程序式語言的特性昏名。less它在CSS 的語法基礎之上，引入了變量阵面，Mixin（混入）轻局，運算以及函數等功能，大大簡化了CSS的編寫样刷，并且降低了CSS的維護成本仑扑，，
-
Less 可以運行在 Node 或瀏覽器端颂斜。
方式1 在客戶端運行l(wèi)ess轉換程序夫壁，了解在html中引入xx.less,同時再引入less.js,就是一個可以運行在客戶端瀏覽器中的less編譯程序 -- 效率偏低拾枣，不推薦使用
方式2 在服務端運行l(wèi)ess轉換程序-推薦
1） 下載并安裝一款服務器端的js解釋器-nodejs 2） 下載less文件的轉換程序lessc --js腳本 3) 在服務器端js解釋器運行l(wèi)essc轉換器沃疮，把自己編寫的.less文件轉換為css文件 a) 可以在命令行中使用轉換程序 node.exe lessc my.less my.css b) 在hbuilder中使用轉換程序 4) html文件中，引用編譯得到的css文件
三. less語法學習
less完全支持css語法
lss支持單行注釋和多行注釋梅肤，但只有多行注釋會被轉換到css文件中
-
less支持變量(variable)
@變量名：值
使用：選擇器 {樣式：@變量名}
-
less支持樣式混合-在一個樣式中引用另一個樣式
.class1(){...} .class2{.. ... .class1 ....}
-
帶參混合
.class()(@參數1司蔬，@參數2，姨蝴。俊啼。。){....} .class2 { ... .class(參數1左医，參數2); ... } } -
嵌套規(guī)則
.class1{ ... .class2 { } } 轉換的結果 .class1{ } .class1 .class2{ } less可以對變量和常量進行算術運算
-
less為樣式提供了幾十個應用函數
lighten(顏色授帕，亮度值)：將制定的顏色變亮制定的百分比
darken(顏色，亮度值)：將指定的顏色變暗指定的百分比
floor(數字) 對數值向下取整
ceil(數字) 對數值向上取整 -
頁面導入
盡量避免使用css文件中的@import指令-會增加HTTP請求次數
為了將一個樣式文件拆分為多個小的樣式文件浮梢，由多人同時編寫跛十，可以使用less中的@import-less中導入其他less文件，轉換時會拼接一個大的完整的css樣式文件秕硝，故推薦在less中導入其他less文件
@import "xx.less"
大型項目中l(wèi)ess文件結構
variable.less 放置所有的變量
mixin.less 放置所有的混合
reset.less 放置HTML元素重置樣式
navbar.less 導航條相關
footer.less 頁腳相關樣式js.less -> 一大堆less文件
四. 通過修改bootstrap的less源文件實現樣式定制
-
刪除不需要的樣式芥映，如輪播廣告/模態(tài)框
在bootstrat.less文件中，注釋掉不需要的@import即可
-
定制需要的組件的默認樣式远豺，如修改導航條的默認背景顏色
修改variables.less文件中的變量即可
-
在bootstrap提供的默認樣式基礎上創(chuàng)建新樣式奈偏，如定制dropdown中的divider的樣式-組件的深度定制
修改某個組件所對應的less文件
