2.21學習經(jīng)驗分享#
Bruce_Zhu于2017.2.21
一壹无、LESS基礎
LESS 是一門 CSS 預處理語言，它擴展了 CSS 語言豌蟋，增加了變量、Mixin歹垫、函數(shù)等特性剥汤，使 CSS 更易維護和擴展。并且LESS 可以運行在 Node 或瀏覽器端排惨。
本質上吭敢，LESS 包含一套自定義的語法及一個解析器，用戶根據(jù)這些語法定義自己的樣式規(guī)則暮芭，這些規(guī)則最終會通過解析器鹿驼，編譯生成對應的 CSS 文件。LESS 并沒有裁剪 CSS 原有的特性辕宏，更不是用來取代 CSS 的畜晰，而是在現(xiàn)有 CSS 語法的基礎上，為 CSS 加入程序式語言的特性瑞筐。
二凄鼻、 LESS編譯方法
方式1 在客戶端運行LESS轉換程序，了解在html中引入xx.less,同時再引入less.js,就是一個可以運行在客戶端瀏覽器中的LESS編譯程序 -- 效率偏低聚假，不推薦使用块蚌。
-
方式2 在服務端運行LESS轉換程序
1） 下載并安裝一款服務器端的js解釋器-nodejs
2） 下載LESS文件的轉換程序lessc --js腳本
3） 在服務器端js解釋器運行l(wèi)essc轉換器，把自己編寫的.less文件轉換為css文件
a) 可以在命令行中使用轉換程序 C:\Users\Administrator>node.exe lessc my.less my.css b) 在HBuilder中使用轉換程序4）在 HTML文件中膘格，引用編譯得到的css文件
-
方式3 使用Sublime Text來轉換LESS文件
1） 打開Sublime Text峭范，然后用Ctrl + Shift + P調出插件控制臺，搜索LESS2CSS插件并下載瘪贱。
2） 安裝好后纱控，當你寫好LESS文件后按Ctrl + S即可在當前LESS文件目錄下自動編譯好.CSS文件（前提是要安裝好Nodejs）
三. LESS語法學習
LESS完全支持CSS語法
LESS支持單行注釋和多行注釋，但只有多行注釋會被轉換到CSS文件中
-
LESS支持變量(variable)
@變量名：值
使用：選擇器 {樣式：@變量名}
-
LESS支持樣式混合-在一個樣式中引用另一個樣式
.class1(){...} .class2{.. ... .class1 ... } -
帶參混合
.class()(@參數(shù)1政敢，@參數(shù)2其徙，。喷户。。){....} .class2 { ... .class(參數(shù)1访锻，參數(shù)2); ... } } -
嵌套規(guī)則
.class1{ ... .class2 { } } 轉換的結果 .class1{ } .class1 .class2{ }
