## 變量 ### 什么是變量？ > 可以存儲一定內容的符號，并在其他地方可以通用引用變量來調用變量里存儲的內容，less里的變量理解和其他高級語言可以類比，但也有其特殊的地方。 ### 如何定義變量 ~~~ @link-color:red; @path:img; ~~~ 這里我們就定義了一個變量名叫link-color,注意變量前需要加上@符號 ### 如何調用變量 1.直接調用 ~~~ @link-color:red; a:hover{ color:@link-color; } ~~~ 等同于 ~~~ a:hover{ color:red; } ~~~ 2.查詢條件調用 ~~~ @my-selector: banner; .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; } ~~~ 等同于 ~~~ .banner{ font-weight:bold; line-height:40px; margin: 0 auto; } ~~~ 3.路徑調用 ~~~ @images: "../img"; body { color: #444; background: url("@{images}/white-sand.png"); } ~~~ 等同于 ~~~ body { color: #444; background: url("../img/white-sand.png"); } ~~~ 4.屬性內使用 ~~~ @property: color; .widget { @{property}: #0ee; background-@{property}: #999; } ~~~ 等同于 ~~~ .widget { color : #0ee; background-color: #999; } ~~~ 5.屬性作為變量【NEW 3.0.0】 ~~~ #box{ width:10px; height:20px; color:red; border:solid 1px $color; } ~~~ 等同于 ~~~ #box{ width:10px; height:20px; color:red; border:solid 1px red; } ~~~ > 注意：變量可以定義在使用的樣式后面,且后者會覆蓋前者 ~~~ .box { backgroud-color:@color } @color:red; ~~~ 同樣也能生成 ~~~ .box{ background-color:red; } ~~~ ### 課后習題 1.下面的寫法有哪些問題？如何修改才是正確的 ~~~ @a:red .box{ color:@a; } ~~~ ~~~ .box{ color:red; border:solid 1px @color; } ~~~ ~~~ @property:color; .box{ @property:red; } ~~~ ~~~ @path:"img"; .box{ backgroud:url("@path/logo.png"); } ~~~