移动端页面布局：Less语法的格式

　　CSS需要编写大量重复的样式属性值来实现页面的样式，如CSS中的一些颜色和数值等经常被使用。而通过less变量来实现CSS样式非常方便，且容易维护。下面讲解如何定义less变量，以及less变量的命名规范。

　　less变量的语法格式如下。

@变量名：值；

　　变量名需要遵循命名规范，具体如下。

　　（1）必须以为前缀。

　　（2）不能包含特殊字符。

　　（3）不能以数字开头。

　　（4）大小写敏感。

　　例如，color是合法的变量名，而lcolor、color~#则是错误的变量名。由于变量名区分大小写，故color和Color是两个不同的变量。

　　下面演示如何使用less变量来设置页面的背景颜色为粉色。

　　（1）定义color变量，示例代码如下。

@color: pink;

　　上述代码中，设置color变量的值为pink。

　　（2）使用变量，示例代码如下。

body {
  color: @color;
}
a:hover {
  color: @color;
}

　　需要注意的是，Less的代码应该书写到*.less文件中，而不是.css文件中。less的书写方式与CSS基本相似。在开发过程中，当同时修改body和a标签的样式时，只需要修改 color变量的值即可。