什么是less？Less變量怎樣能實(shí)現(xiàn)CSS樣式？

　　Less(Leaner Style Sheets)是一門(mén)CSS擴(kuò)展語(yǔ)言，也稱為CSS預(yù)處理器。作為CSS的一種形式的擴(kuò)展，Less并沒(méi)有減少CSS的功能，而是在現(xiàn)有的CSS語(yǔ)法上，為CSS加入程序式語(yǔ)言的特性。

　　Less與Sass的區(qū)別主要包括以下內(nèi)容。

　　(1) Less是基于JavaScript，是在客戶端處理的。

　　(2) Sass是基于Ruby的，是在服務(wù)器端處理的。

　　(3) 關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$。

　　(4) 關(guān)于輸出設(shè)置，Less沒(méi)有輸出設(shè)置，而Sass提供了4種輸出選項(xiàng)，分別是nested、compact、compressed和expanded。

　　(5) Sass支持條件語(yǔ)句，可以使用if{}else{}、for{}循環(huán)等，而Less不支持。

　　另外，Less在CSS的語(yǔ)法基礎(chǔ)之上，引入了變量、Mixin(混入)、運(yùn)算以及函數(shù)等功能，簡(jiǎn)化了CSS的編寫(xiě)，使CSS更易維護(hù)和擴(kuò)展，降低了CSS的維護(hù)成本。正如它的名稱，Less可以讓我們用更少的代碼做更多的事情。

　　因?yàn)镃SS需要編寫(xiě)大量重復(fù)的樣式屬性值來(lái)實(shí)現(xiàn)頁(yè)面的樣式，如CSS中的一些顏色和數(shù)值等經(jīng)常被使用。所以，通過(guò)Less變量來(lái)實(shí)現(xiàn)CSS樣式非常方便，而且容易維護(hù)。下面為大家講解如何定義Less變量，以及Less變量的命名規(guī)范。

　　Less變量的語(yǔ)法格式如下。

　　@變量名: 值;

　　變量名需要遵循命名規(guī)范，具體如下。

　　(1)必須以@為前綴。

　　(2)不能包含特殊字符。

　　(3)不能以數(shù)字開(kāi)頭。

　　(4)大小寫(xiě)敏感。

　　例如，@color是合法的變量名，而@1color、@color~@#則是錯(cuò)誤的變量名。由于變量名區(qū)分大小寫(xiě)，@color和@Color是兩個(gè)不同的變量。

　　下面為大家演示如何使用Less變量來(lái)設(shè)置頁(yè)面的背景顏色為粉色。

　　(1)定義@color變量，示例代碼如下。

@color: pink;

上述代碼中，設(shè)置@color變量的值為pink。

（2）使用@變量，示例代碼如下。

body { 
 color: @color;
}
a:hover {
 color: @color;
}

　　需要注意的是，Less的代碼應(yīng)該書(shū)寫(xiě)到*.less文件中，而不是.css文件中。Less的書(shū)寫(xiě)方式與CSS基本相似。在開(kāi)發(fā)過(guò)程中，當(dāng)同時(shí)修改body和a標(biāo)簽的樣式時(shí)，我們只需要修改@color變量的值即可。


猜你喜歡：

rem是什么？和em單位區(qū)別在哪

創(chuàng)建超鏈接的基本語(yǔ)法有哪些？

黑馬程序員web前端培訓(xùn)課程 

傳智播客web前端培訓(xùn)課程