什么是less？如何通過Less變量來實現(xiàn)CSS樣式？

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

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

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

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

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

　　(4) 關于輸出設置，Less沒有輸出設置，而Sass提供了4種輸出選項，分別是nested、compact、compressed和expanded。

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

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

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

　　Less變量的語法格式如下。

　　@變量名: 值;

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

　　(1)必須以@為前綴。

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

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

　　(4)大小寫敏感。

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

　　下面為大家演示如何使用Less變量來設置頁面的背景顏色為粉色。

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

@color: pink;

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

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

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

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

猜你喜歡：

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

Web開發(fā)者怎樣兼顧多個版本的瀏覽器

表單的構成是什么？如何創(chuàng)建表單

黑馬程序員web前端培訓課程