移動(dòng)端頁(yè)面布局：Less語(yǔ)法的格式

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

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

@變量名：值；

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

　?。?）必須以為前綴。

　?。?）不能包含特殊字符。

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

　?。?）大小寫敏感。

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

　　下面演示如何使用less變量來設(shè)置頁(yè)面的背景顏色為粉色。

　?。?）定義color變量，示例代碼如下。

@color: pink;

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

　?。?）使用變量，示例代碼如下。

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

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