Less语法格式

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

Less变量的语法格式如下。

@变量名: 值;

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

（1）必须以@为前缀。

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

（3）不能以数字开头。

（4）大小写敏感。

例如，@color是合法的变量名，而@1color、@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变量的值即可。