HTML-用less写css样式

使用说明

笔者用的编译工具是vscode，这里需要下载一个插件进行使用：Easy LESS

新建一个xxx.less文件，当你下载好Easy LESS插件后，当你在xxx.less文件写代码的时候，自动会生成xxx.css文件，在你的html文件里头部引入这个自动生成的xxx.css文件。注意引入的不是xxx.less文件，这个Easy LESS 的作用就是自动将less代码转化为css代码。

为什么用less写css代码

less相比css代码，在css代码中：
1、css没有变量
2、不能运算
3、没有函数
4、不能嵌套
5、不具备程序的特点（程序的特点：如可以使用方法，能够运算等程序特点）
综上，上面所说的css不具备的，less具备，包括可以写变量、能够运算、能够使用函数（但跟js内的函数是有区别的，不是function开头）

less使用简单介绍

1、定义变量

怎么定义变量？
格式：@变量名 ，变量名同意遵循js里的变量取名规范如：首位不能是数字开头，需要驼峰命名、见名知意等

示例：

@color:red;
 

怎么使用变量？

div{background:@color;
 }
 

2、混合（混入函数）

不传参的形式（前面也说了，less的”函数“跟js里函数的定义是有区别的）

怎么定义？

.con{width: 1200px;height: 100px;margin: 0 auto;
 }
 

怎么使用？

section{.con;
 }
 

可传参的形式

怎么定义？

.border(@width,@style,@color){border: @width @style @color;//注意是有空格的
 }
 

怎么使用？

section{.border(5px,solid,red);//必须要用逗号隔开
 }
 

3、嵌套

看以下的html结构：

怎么写样式？

#footer{width: 500px;height: 500px;background: red;div{width: 200px;height: 200px;li{list-style: none;a{text-decoration: none;&:hover{//给a标签加鼠标悬停效果color: red;}}}}
 }
 

可以看出这样我们就可以直接按着html的嵌套关系，在less也可以用这种嵌套关系写样式，可以省略使用后代选择器、伪类选择器等选择器的使用。

4、计算（运算）（ 加、减、乘、除 ）

header{//除width: (200px / 2);
 }
 header{//乘	width: 200 * 1px;
 }
 header{width: 200px - 100px;
 }
 header{width: 200px + 100px;
 }
 

注意：无论是+ - * /最好两边都要有空格。因为-在css里，有通过这种符号连接的样式，如background-color，如果不加空格可能会导致识别不出来，也算是语法的规范问题。

5、导入其他less样式（通常用于引入一些公共的样式，如颜色、图片等等）
示例

@import url(./base.less);
 

补充

通过less转css方式很多，笔者在上面只介绍了一种。但是还有以下等方法：
1、用script引用cdn
2、用npm在本地装less 先写好less文件再手动转css
3、快速直观感受less，可通过vscode编辑器，装easy less 插件。
4、通过项目自动化软件 如vue、react，自动将less转化为css

更多有关less可 点击跳转