更新時間:2020-11-20 來源:黑馬程序員 瀏覽量:
Less(Leaner Style Sheets)是一門CSS擴(kuò)展語言,也稱為CSS預(yù)處理器。作為CSS的一種形式的擴(kuò)展,Less并沒有減少CSS的功能,而是在現(xiàn)有的CSS語法上,為CSS加入程序式語言的特性。
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沒有輸出設(shè)置,而Sass提供了4種輸出選項,分別是nested、compact、compressed和expanded。
(5) Sass支持條件語句,可以使用if{}else{}、for{}循環(huán)等,而Less不支持。
另外,Less在CSS的語法基礎(chǔ)之上,引入了變量、Mixin(混入)、運算以及函數(shù)等功能,簡化了CSS的編寫,使CSS更易維護(hù)和擴(kuò)展,降低了CSS的維護(hù)成本。正如它的名稱,Less可以讓我們用更少的代碼做更多的事情。
因為CSS需要編寫大量重復(fù)的樣式屬性值來實現(xiàn)頁面的樣式,如CSS中的一些顏色和數(shù)值等經(jīng)常被使用。所以,通過Less變量來實現(xiàn)CSS樣式非常方便,而且容易維護(hù)。下面為大家講解如何定義Less變量,以及Less變量的命名規(guī)范。
Less變量的語法格式如下。
@變量名: 值;
變量名需要遵循命名規(guī)范,具體如下。
(1)必須以@為前綴。
(2)不能包含特殊字符。
(3)不能以數(shù)字開頭。
(4)大小寫敏感。
例如,@color是合法的變量名,而@1color、@color~@#則是錯誤的變量名。由于變量名區(qū)分大小寫,@color和@Color是兩個不同的變量。
下面為大家演示如何使用Less變量來設(shè)置頁面的背景顏色為粉色。
(1)定義@color變量,示例代碼如下。
@color: pink;
上述代碼中,設(shè)置@color變量的值為pink。
(2)使用@變量,示例代碼如下。
body { color: @color; } a:hover { color: @color; }
需要注意的是,Less的代碼應(yīng)該書寫到*.less文件中,而不是.css文件中。Less的書寫方式與CSS基本相似。在開發(fā)過程中,當(dāng)同時修改body和a標(biāo)簽的樣式時,我們只需要修改@color變量的值即可。
猜你喜歡: