首頁(yè)常見問題正文

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

更新時(shí)間:2022-12-19 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

  less變量的語法格式如下。

@變量名:值;

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

 ?。?)必須以為前綴。

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

 ?。?)不能以數(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變量的值即可。

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!