更新時間:2022-12-19 來源:黑馬程序員 瀏覽量:
CSS需要編寫大量重復的樣式屬性值來實現(xiàn)頁面的樣式,如CSS中的一些顏色和數(shù)值等經(jīng)常被使用。而通過less變量來實現(xiàn)CSS樣式非常方便,且容易維護。下面講解如何定義less變量,以及l(fā)ess變量的命名規(guī)范。
less變量的語法格式如下。
@變量名:值;
變量名需要遵循命名規(guī)范,具體如下。
?。?)必須以為前綴。
?。?)不能包含特殊字符。
?。?)不能以數(shù)字開頭。
?。?)大小寫敏感。
例如,color是合法的變量名,而lcolor、color~#則是錯誤的變量名。由于變量名區(qū)分大小寫,故color和Color是兩個不同的變量。
下面演示如何使用less變量來設置頁面的背景顏色為粉色。
?。?)定義color變量,示例代碼如下。
@color: pink;
上述代碼中,設置color變量的值為pink。
?。?)使用變量,示例代碼如下。
body { color: @color; } a:hover { color: @color; }
需要注意的是,Less的代碼應該書寫到*.less文件中,而不是.css文件中。less的書寫方式與CSS基本相似。在開發(fā)過程中,當同時修改body和a標簽的樣式時,只需要修改 color變量的值即可。
【AI設計】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設計連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運營】深圳跨境電商運營畢業(yè)22個工作日,就業(yè)率91%+,最高薪資達13500元
2025-09-19【AI運維】鄭州運維1期就業(yè)班,畢業(yè)14個工作日,班級93%同學已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個工作日,就業(yè)率已達到94.55%,班均薪資20763元
2025-09-19【AI智能應用開發(fā)-Java】畢業(yè)當天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19