## 变量 ### 什么是变量？ > 可以存储一定内容的符号，并在其他地方可以通用引用变量来调用变量里存储的内容，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"); } ~~~