标签：www. web 设置 这不 变量 没有 方便 ble 变量赋值
Less 中的变量和其他编程语言一样，可以实现值的复用，同样它也有作用域（scope）。简单的讲，变量作用域就是局部变量和全局变量的概念。
Less 中，变量作用域采用的是就近原则，换句话说，就是先查找自己有没有这个变量，如果有，就取自己的变量，如果没有，就查找父元素，依此类推。先看一个简单的例子，Less 文件如下：
@width : 20px; #homeDiv { @width : 30px; #centerDiv { width : @width; // 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px}编译后的CSS代码为：
#homeDiv #centerDiv { width: 30px;}#leftDiv { width: 20px;}对于程序开发人员来说，变量应该是最熟悉不过的概念了。如果多次重复使用一个信息，将它设置为一个变量，就可以在代码中重复引用。这不仅避免重复定义，还能使代码更容易维护。
Less中，变量由变量名称和值组成。变量名以 @ 为前缀，由字母、数字、_和-组成，变量名称和值之间用冒号隔开。如：
/* 定义变量 */@color: #4d926f;/* 应用到元素中 */header { color: @color;}h2 { color: @color;}上面的代码定义了一个变量 @color，并给它赋值为 #4d926f。然后，就可以在选择器 header 和 h2 中反复使用它，而不必重复定义。编译后的CSS代码为：
header { color: #4d926f;}h2 { color: #4d926f;}从上面的代码可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量，来统一管理起来。当需要调整样式时，只需要修改相应变量的值就可以了，非常方便。因此，变量适用于定义主题，可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，不同的主题只需要定义不同的变量文件就可以了。
当然，变量也同样适用于 CSS RESET（重置样式表），在 Web 开发中，往往需要屏蔽浏览器的默认样式，就可以使用 Less的变量特性。这样，就可以在不同项目间重用样式表，我们仅仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
不仅可以直接在属性值中使用变量，还可以用类似 @{name} 的结构，以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时，变量将被替换为它们相应的值。
1）选择器名插值
Less选择器名称中可以引用任何变量。如：
@head: h;.@{head}2 { font-size: 16px;}编译后的CSS代码为：
.h2 { font-size: 16px;}2）属性名插值
Less属性名称中可以引用任何变量。如：
@my-property: color;.myclass { background-@{my-property}: #81F7D8;}编译后的CSS代码为：
.myclass { background-color: #81F7D8;}3）URL插值
变量还可以用来保存URL，并在 url() 中使用它。如：
@host: "http://www.waibo.wang/";h2 { color: @color; background: url("@{host}img/bg.png");}编译后的CSS代码为：
h2 { color: #f00; background: url("http://www.waibo.wang/img/bg.png");}4）import插值
import语句中，可以使用保存路径的变量。如：
@host: "http://www.waibo.wang/";@import "@{host}/reset.less";5）媒体查询插值
如果你希望在media query中使用Less变量，你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的，所以可以用作media query的参数。如：
@singleQuery: ~"(max-width: 480px)";@media screen, @singleQuery { div { width:2000px; } } 编译后的CSS代码为：
@media screen, (max-width: 480px) { div { width: 2000px; }}
Less 中的变量和其他编程语言一样，可以实现值的复用，同样它也有作用域（scope）。简单的讲，变量作用域就是局部变量和全局变量的概念。
Less 中，变量作用域采用的是就近原则，换句话说，就是先查找自己有没有这个变量，如果有，就取自己的变量，如果没有，就查找父元素，依此类推。先看一个简单的例子，Less 文件如下：
@width : 20px; #homeDiv { @width : 30px; #centerDiv { width : @width; // 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px}编译后的CSS代码为：
#homeDiv #centerDiv { width: 30px;}#leftDiv { width: 20px;}标签：www. web 设置 这不 变量 没有 方便 ble 变量赋值
原文地址：http://www.cnblogs.com/waibo/p/7899799.html
