大家好往史，我是IT修真院鄭州分院第05期學(xué)員竖哩，一枚正直純潔善良的web程序員信姓。今天給大家分享一下讶凉，修真院官網(wǎng)css任務(wù)11，如何使用less?
1.背景介紹
什么是less
我們先提一下css
CSS（層疊樣式表）是一門(mén)歷史悠久的標(biāo)記性語(yǔ)言逸月，同 HTML 一道疲扎，被廣泛應(yīng)用于萬(wàn)維網(wǎng)（World Wide Web）中絮蒿。HTML 主要負(fù)責(zé)文檔結(jié)構(gòu)的定義冲甘，CSS 負(fù)責(zé)文檔表現(xiàn)形式或樣式的定義绩卤。
作為一門(mén)標(biāo)記性語(yǔ)言，CSS 的語(yǔ)法相對(duì)簡(jiǎn)單江醇，對(duì)使用者的要求較低濒憋，但同時(shí)也帶來(lái)一些問(wèn)題：CSS 需要書(shū)寫(xiě)大量看似沒(méi)有邏輯的代碼，不方便維護(hù)及擴(kuò)展陶夜，不利于復(fù)用凛驮，尤其對(duì)于非前端開(kāi)發(fā)工程師來(lái)講，往往會(huì)因?yàn)槿鄙?CSS 編寫(xiě)經(jīng)驗(yàn)而很難寫(xiě)出組織良好且易于維護(hù)的 CSS 代碼条辟，造成這些困難的很大原因源于 CSS 是一門(mén)非程序式語(yǔ)言黔夭，沒(méi)有變量、函數(shù)捂贿、SCOPE（作用域）等概念纠修。
為了加入一些編程元素胳嘲，讓CSS能像其他程序語(yǔ)言一樣可以做一些預(yù)定的處理厂僧，CSS預(yù)處理器應(yīng)運(yùn)而生。 CSS預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言了牛，進(jìn)行樣式設(shè)計(jì)颜屠，然后再編譯成正常的CSS文件，以供項(xiàng)目使用鹰祸。CSS預(yù)處理器為CSS增加一些編程的特性甫窟，使用變量、簡(jiǎn)單的邏輯程序蛙婴、函數(shù)等在編程語(yǔ)言中的一些基本特性粗井，讓CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳浇衬，更易于代碼的維護(hù)懒构。
使用最為普遍的三款CSS預(yù)處理器框架分別是 SASS、LESS和Stylus耘擂。
1胆剧、SASS：最早、最成熟的CSS預(yù)處理器醉冤，擁有Ruby社區(qū)的支持和compass這一最強(qiáng)大的CSS框架秩霍，目前受LESS影響，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS蚁阳。SASS使用.sass擴(kuò)展名铃绒。
2、LESS：受SASS的影響較大韵吨，但又使用CSS的語(yǔ)法匿垄，更容易上手，在Ruby社區(qū)之外支持者遠(yuǎn)超過(guò)SASS归粉，其缺點(diǎn)是比起SASS來(lái)椿疗，可編程功能不夠，優(yōu)點(diǎn)是簡(jiǎn)單和兼容CSS糠悼。LESS影響了SASS演變到SCSS届榄，著名的Twitter Bootstrap就是采用LESS做底層語(yǔ)言的。LESS使用.less擴(kuò)展名倔喂。
3铝条、Stylus：來(lái)自Node.js社區(qū)，主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理席噩，在node.js社區(qū)內(nèi)有一定支持者班缰，但在廣泛意義上人氣還完全不如SASS和LESS。Stylus使用.styl擴(kuò)展名悼枢。Stylus功能上更為強(qiáng)壯埠忘，和JavaScript聯(lián)系更加緊密。
LESS是受SASS啟發(fā)而開(kāi)發(fā)的工具馒索，為什么要開(kāi)發(fā)SASS的替代品莹妒？
原因：語(yǔ)法。SASS支持老的縮進(jìn)式的語(yǔ)法{不帶花括號(hào)的語(yǔ)法）绰上，因此程序員需要學(xué)習(xí)一種新的語(yǔ)法旨怠；LESS能與CSS無(wú)縫地緊密結(jié)合在一起，能夠讓開(kāi)發(fā)者從已有CSS文件平滑地過(guò)渡到LESS蜈块，而不需要像SASS那樣將CSS文件轉(zhuǎn)換成SASS格式鉴腻。
目前受LESS影響迷扇，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS。Sass 和 SCSS 其實(shí)是同一種東西爽哎，我們平時(shí)都稱(chēng)之為 Sass谋梭，SCSS 是 Sass 3引 入新的語(yǔ)法，其語(yǔ)法完全兼容 CSS3倦青，并且繼承了 Sass 的強(qiáng)大功能瓮床。 不同點(diǎn)：
（1）文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名产镐，而 SCSS 是以“.scss”后綴為擴(kuò)展名.
（2）語(yǔ)法書(shū)寫(xiě)方式不同隘庄，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書(shū)寫(xiě)，不帶大括號(hào)({})和分號(hào)(;)癣亚，而 SCSS 的語(yǔ)法書(shū)寫(xiě)和我們的 CSS 語(yǔ)法書(shū)寫(xiě)方式非常類(lèi)似（SCSS 和 CSS 寫(xiě)法無(wú)差別）丑掺。簡(jiǎn)單點(diǎn)說(shuō)，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用述雾。
2.知識(shí)剖析
2.1如何使用LESS街州？
頁(yè)面引入js代碼文件解析
我們可以直接在客戶(hù)端使用 .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"
服務(wù)器端編譯less
安裝完node.js之后唆缴，打開(kāi)Node.js command prompt,通過(guò)npm install -d less命令安裝LESS包,然后新建一個(gè)demo.less文件，輸入lessc demo.less > test.css之后以后即可編譯CSS文件黍翎。
使用工具進(jìn)行編譯
監(jiān)測(cè)指定的less文件的變化面徽，如果檢測(cè)到變化，則自動(dòng)將less文件輸出成相應(yīng)的css文件匣掸。并且大多數(shù)工具都提供一定的debug功能趟紊。
例如使用koala對(duì)less文件進(jìn)行編譯
3.常見(jiàn)問(wèn)題
less包含了什么
4.解決方案
Less在CSS語(yǔ)法的基礎(chǔ)上進(jìn)行了擴(kuò)展，主要包含： 變量碰酝、嵌套霎匈、混合、操作符送爸、函數(shù)等等.
變量(variables)
LESS 允許開(kāi)發(fā)者自定義變量铛嘱，變量可以在全局樣式中使用，變量使得樣式修改起來(lái)更加簡(jiǎn)單碱璃。我們可以從下面的代碼了解變量的使用及作用：
less文件
經(jīng)過(guò)編譯生成的 CSS 文件如下：
從上面的代碼中我們可以看出弄痹，可以將相同的值定義成變量統(tǒng)一管理起來(lái)饭入。該特性適用于定義主題嵌器，我們可以將背景顏色、字體顏色谐丢、邊框?qū)傩缘瘸Ｒ?guī)樣式進(jìn)行統(tǒng)一定義爽航，這樣不同的主題只需要定義不同的變量文件就可以了蚓让。less 變量以@作為前綴，不能以數(shù)字開(kāi)頭讥珍， 不能包含特殊字符历极。
Less中的變量還具有計(jì)算功能，如：
less文件 css文件
在Less中的變量實(shí)際上就是一個(gè)“常量”衷佃，因?yàn)樗鼈冎荒鼙欢x一次趟卸。
less文件 @dawa:#29b078; @dawa:white; .siwa{ color: @dawa; }
css文件 .siwa { color: #ffffff; }
上面代碼很明顯說(shuō)明了后的@dawa覆蓋了前面的@dawa。
Mixins（混入）
如圖所示less文件 css文件
從上面的代碼我們可以看出： 什么是混入氏义，這個(gè)是在bootstrap中經(jīng)吵校看到的一個(gè)東西」哂疲混入可以將定義好的class A輕松的引 入到classB 邻邮，從而簡(jiǎn)單實(shí)現(xiàn)class B繼承所有class A的屬性。定義的時(shí)候前面要加點(diǎn)克婶。
而在引用之前筒严，這段代碼都不會(huì)出現(xiàn)在編譯文件中，也就是不會(huì)生成任何內(nèi)容情萤。這也是非常重要的一個(gè)特性鸭蛙。
混入(Mixin)有一個(gè)名詞叫“混入?yún)?shù)（Parametric Mixins）”
我們的默認(rèn)值是原諒綠我們可以改為自己想要的顏色比如紅色或者更綠
嵌套規(guī)則(Nested Rules)
嵌套可以增強(qiáng)代碼的層級(jí)關(guān)系，我們也可以通過(guò)嵌套來(lái)實(shí)現(xiàn)繼承筋岛，這樣很大程度減少了代碼量规惰，代碼量看起來(lái)更加清晰。
有 & 時(shí)解析的是同一個(gè)元素或此元素的偽類(lèi)泉蝌，沒(méi)有 & 解析是后代元素
函數(shù)
LESS中的函數(shù) - 映射了JavaScript函數(shù)代碼歇万，如果你愿意的話(huà)，可以操縱屬性值勋陪。這一塊我還沒(méi)整明白贪磺，大家知道less里有函數(shù)，可以自己找一下诅愚。
LESS 還擁有一些很有趣的特性有助于我們的開(kāi)發(fā)寒锚，例如模式匹配、條件表達(dá)式违孝、命名空間和作用域刹前，以及 JavaScript 賦值等等。
具體參考：
可以了解：
值得參考的 10 個(gè) LESS CSS 實(shí)例
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
less和sass選哪個(gè)用雌桑？
7.參考文獻(xiàn)
參考二：CSS 預(yù)處理語(yǔ)言的模塊化實(shí)踐
參考四：學(xué)會(huì)如何使用LESS（一）----變量和混合
參考七：CSS——LESS
8.更多討論
1喇喉、國(guó)內(nèi)互聯(lián)網(wǎng)前端用LESS的還是SASS的多一些？
前一段看一個(gè)微博做了一個(gè)粗略的統(tǒng)計(jì)校坑，喜歡LESS的同學(xué)多于喜歡Sass的同學(xué)拣技。
（1）LESS環(huán)境較Sass簡(jiǎn)單
（2）有同學(xué)說(shuō)LESS使用較Sass簡(jiǎn)單
（3）相對(duì)而言千诬，國(guó)內(nèi)前端團(tuán)隊(duì)使用LESS的同學(xué)會(huì)略多于Sass
2、less的三種引入方式有什么優(yōu)缺點(diǎn)膏斤？
頁(yè)面引入js代碼文件解析
優(yōu)點(diǎn)：不必安裝less編譯環(huán)境徐绑，同樣可以使用less文件
缺點(diǎn)：在頁(yè)面上解析代碼，效率較低莫辨，受機(jī)器傲茄、網(wǎng)絡(luò)影響較大 ，影響了頁(yè)面加載速度
服務(wù)器端預(yù)編譯
優(yōu)點(diǎn)：服務(wù)器端預(yù)編譯沮榜，效率高烫幕，避免客戶(hù)端解析延時(shí)。
缺點(diǎn)：消耗服務(wù)器資源,編譯出錯(cuò)的話(huà)敞映，你可能要自己寫(xiě)一個(gè)處理error的函數(shù),何時(shí)編譯less文件成為一個(gè)問(wèn)題较曼，每次有客戶(hù)請(qǐng)求就編譯一次less文件顯然效率比較低，但是根據(jù)less文件的變化來(lái)編譯又好像沒(méi)有放在服務(wù)器上編譯的必要振愿。
使用工具編譯
優(yōu)點(diǎn)：實(shí)時(shí)編譯捷犹，更快更方便。
缺點(diǎn)：要一直打開(kāi)冕末，每天要開(kāi)始編寫(xiě)時(shí)就打開(kāi)萍歉，不能忘。
3档桃、你比較喜歡less還是sass枪孩？
你自己使用哪一種，不應(yīng)該根據(jù)國(guó)內(nèi)對(duì)哪一種使用的人多來(lái)做出發(fā)參考藻肄，而是哪種更適合自己的團(tuán)隊(duì)蔑舞。
今天的分享就到這里啦，歡迎大家點(diǎn)贊嘹屯、轉(zhuǎn)發(fā)攻询、留言、拍磚~
我們下周再見(jiàn)州弟！
------------------------------------------------------------------------------------------------------------------------
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師钧栖，現(xiàn)在開(kāi)始，找個(gè)師兄婆翔，帶你入門(mén)拯杠，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷每信”潭陪。
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線(xiàn)纺腊，學(xué)習(xí)透明化畔咧，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)揖膜∈姆校快來(lái)與我一起學(xué)習(xí)吧~
我的邀請(qǐng)鏈接：http://www.jnshu.com/login/1/12164783
