大家好，我是IT修真院鄭州分院第05期學員，一枚正直純潔善良的web程序員。今天給大家分享一下，修真院官網css任務11，如何使用less?
1.背景介紹
什么是less
我們先提一下css
CSS（層疊樣式表）是一門歷史悠久的標記性語言，同 HTML 一道，被廣泛應用于萬維網（World Wide Web）中。HTML 主要負責文檔結構的定義，CSS 負責文檔表現形式或樣式的定義。
作為一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，尤其對于非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼，造成這些困難的很大原因源于 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。
為了加入一些編程元素，讓CSS能像其他程序語言一樣可以做一些預定的處理，CSS預處理器應運而生。 CSS預處理器用一種專門的編程語言，進行樣式設計，然后再編譯成正常的CSS文件，以供項目使用。CSS預處理器為CSS增加一些編程的特性，使用變量、簡單的邏輯程序、函數等在編程語言中的一些基本特性，讓CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護。
使用最為普遍的三款CSS預處理器框架分別是 SASS、LESS和Stylus。
1、SASS：最早、最成熟的CSS預處理器，擁有Ruby社區的支持和compass這一最強大的CSS框架，目前受LESS影響，已經進化到了全面兼容CSS的SCSS。SASS使用.sass擴展名。
2、LESS：受SASS的影響較大，但又使用CSS的語法，更容易上手，在Ruby社區之外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，優點是簡單和兼容CSS。LESS影響了SASS演變到SCSS，著名的Twitter Bootstrap就是采用LESS做底層語言的。LESS使用.less擴展名。
3、Stylus：來自Node.js社區，主要用來給Node項目進行CSS預處理，在node.js社區內有一定支持者，但在廣泛意義上人氣還完全不如SASS和LESS。Stylus使用.styl擴展名。Stylus功能上更為強壯，和JavaScript聯系更加緊密。
LESS是受SASS啟發而開發的工具，為什么要開發SASS的替代品？
原因：語法。SASS支持老的縮進式的語法{不帶花括號的語法），因此程序員需要學習一種新的語法；LESS能與CSS無縫地緊密結合在一起，能夠讓開發者從已有CSS文件平滑地過渡到LESS，而不需要像SASS那樣將CSS文件轉換成SASS格式。
目前受LESS影響，已經進化到了全面兼容CSS的SCSS。Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，SCSS 是 Sass 3引 入新的語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能。 不同點：
（1）文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名.
（2）語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似（SCSS 和 CSS 寫法無差別）。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。
2.知識剖析
2.1如何使用LESS？
頁面引入js代碼文件解析
我們可以直接在客戶端使用 .less（LESS 源文件），只需要從 http://lesscss.org下載 less.js 文件，然后在我們需要引入 LESS 源文件的 HTML 中加入如下代碼,也可以直接引入cdn. 首先引入less代碼
link rel="stylesheet/less" href="example.less"
script src="http://cdn.bootcss.com/less.js/2.7.0/less.js"
服務器端編譯less
安裝完node.js之后，打開Node.js command prompt,通過npm install -d less命令安裝LESS包,然后新建一個demo.less文件，輸入lessc demo.less > test.css之后以后即可編譯CSS文件。
使用工具進行編譯
監測指定的less文件的變化，如果檢測到變化，則自動將less文件輸出成相應的css文件。并且大多數工具都提供一定的debug功能。
例如使用koala對less文件進行編譯
3.常見問題
less包含了什么
4.解決方案
Less在CSS語法的基礎上進行了擴展，主要包含： 變量、嵌套、混合、操作符、函數等等.
變量(variables)
LESS 允許開發者自定義變量，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡單。我們可以從下面的代碼了解變量的使用及作用：
less文件
經過編譯生成的 CSS 文件如下：
從上面的代碼中我們可以看出，可以將相同的值定義成變量統一管理起來。該特性適用于定義主題，我們可以將背景顏色、字體顏色、邊框屬性等常規樣式進行統一定義，這樣不同的主題只需要定義不同的變量文件就可以了。less 變量以@作為前綴，不能以數字開頭， 不能包含特殊字符。
Less中的變量還具有計算功能，如：
less文件 css文件
在Less中的變量實際上就是一個“常量”，因為它們只能被定義一次。
less文件 @dawa:#29b078; @dawa:white; .siwa{ color: @dawa; }
css文件 .siwa { color: #ffffff; }
上面代碼很明顯說明了后的@dawa覆蓋了前面的@dawa。
Mixins（混入）
如圖所示less文件 css文件
從上面的代碼我們可以看出： 什么是混入，這個是在bootstrap中經常看到的一個東西。混入可以將定義好的class A輕松的引 入到classB ，從而簡單實現class B繼承所有class A的屬性。定義的時候前面要加點。
而在引用之前，這段代碼都不會出現在編譯文件中，也就是不會生成任何內容。這也是非常重要的一個特性。
混入(Mixin)有一個名詞叫“混入參數（Parametric Mixins）”
我們的默認值是原諒綠我們可以改為自己想要的顏色比如紅色或者更綠
嵌套規則(Nested Rules)
嵌套可以增強代碼的層級關系，我們也可以通過嵌套來實現繼承，這樣很大程度減少了代碼量，代碼量看起來更加清晰。
有 & 時解析的是同一個元素或此元素的偽類，沒有 & 解析是后代元素
函數
LESS中的函數 - 映射了JavaScript函數代碼，如果你愿意的話，可以操縱屬性值。這一塊我還沒整明白，大家知道less里有函數，可以自己找一下。
LESS 還擁有一些很有趣的特性有助于我們的開發，例如模式匹配、條件表達式、命名空間和作用域，以及 JavaScript 賦值等等。
具體參考：
可以了解：
5.編碼實戰
6.擴展思考
less和sass選哪個用？
7.參考文獻
參考一：博客園sass的學習筆記
參考二：CSS 預處理語言的模塊化實踐
參考三：LESS CSS 框架簡介
參考五：初步認識 LESS
參考六：less的配置安裝及語法使用
參考七：CSS——LESS
8.更多討論
1、國內互聯網前端用LESS的還是SASS的多一些？
前一段看一個微博做了一個粗略的統計，喜歡LESS的同學多于喜歡Sass的同學。
（1）LESS環境較Sass簡單
（2）有同學說LESS使用較Sass簡單
（3）相對而言，國內前端團隊使用LESS的同學會略多于Sass
2、less的三種引入方式有什么優缺點？
頁面引入js代碼文件解析
優點：不必安裝less編譯環境，同樣可以使用less文件
缺點：在頁面上解析代碼，效率較低，受機器、網絡影響較大 ，影響了頁面加載速度
服務器端預編譯
優點：服務器端預編譯，效率高，避免客戶端解析延時。
缺點：消耗服務器資源,編譯出錯的話，你可能要自己寫一個處理error的函數,何時編譯less文件成為一個問題，每次有客戶請求就編譯一次less文件顯然效率比較低，但是根據less文件的變化來編譯又好像沒有放在服務器上編譯的必要。
使用工具編譯
優點：實時編譯，更快更方便。
缺點：要一直打開，每天要開始編寫時就打開，不能忘。
3、你比較喜歡less還是sass？
你自己使用哪一種，不應該根據國內對哪一種使用的人多來做出發參考，而是哪種更適合自己的團隊。
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
我們下周再見！
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
我的邀請鏈接：http://www.jnshu.com/login/1/12164783
