国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
变量
LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
可以从下面的代码了解变量的使用及作用：
清单 3 LESS 文件 @border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }
经过编译生成的 CSS 文件如下：
清单 4. CSS 文件 .mythemes tableBorder { border: 1px solid #b5bcc7; }
从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。
该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
清单 5. LESS 文件 @width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }
经过编译生成的 CSS 文件如下：
清单 6. CSS 文件 #homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; }
