什么是less？如何通过Less变量来实现CSS样式？

　　Less(Leaner Style Sheets)是一门CSS扩展语言，也称为CSS预处理器。作为CSS的一种形式的扩展，Less并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

　　Less与Sass的区别主要包括以下内容。

　　(1) Less是基于JavaScript，是在客户端处理的。

　　(2) Sass是基于Ruby的，是在服务器端处理的。

　　(3) 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

　　(4) 关于输出设置，Less没有输出设置，而Sass提供了4种输出选项，分别是nested、compact、compressed和expanded。

　　(5) Sass支持条件语句，可以使用if{}else{}、for{}循环等，而Less不支持。

　　另外，Less在CSS的语法基础之上，引入了变量、Mixin(混入)、运算以及函数等功能，简化了CSS的编写，使CSS更易维护和扩展，降低了CSS的维护成本。正如它的名称，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变量的值即可。

猜你喜欢：

rem是什么？和em单位有什么区别

Web开发者怎样兼顾多个版本的浏览器

表单的构成是什么？如何创建表单

黑马程序员web前端培训课程