前言

首先我们介绍什么是less ：Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

以后写css尽量用less

less官网

less.bootcss.com/#%E6%A6%82%…

安装

拓展easy less 可将less转为css文件

首先在vscode中下载插件 设置 > 拓展 > Easy LESS 安装即可

然后创建一个less文件

写完后保存，会自动生成一个和less同名的css文件，然后我们把css文件引入HTML

1.用@定义变量

定义好所有的需要用到pink的地方都可以直接写@color

2.用属性名作为变量，应该这样调用(语法糖，用的少，知道一下)

还可以写class类

3.变量的延迟加载

会等下面的@var： 3；执行完后再执行，所以它的值是3

4.less嵌套

基本嵌套规则

&的使用

当我们用伪元素选择器的时候，就应该用 & 符号

5.less混合（是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法）

1.普通混合

比如两个盒子有太多相同的代码，很冗余，就可以把他们两个相同的样式定义到.co里，用到的时候直接调用.co

2.带参数的混合

直接在.co里写参数，会传递到上面，和JS中的用构造函数创建对象有些类似

3.带默认值参数的混合

@{o}传递参数了，那它的样式就是传递的参数，@{t}没有传递参数，那就用默认值参数

4.命名参数

如果单独写参数不命名，会默认将实参传给第一个@w，会出现错误

5.匹配模式

想要用哪个样式，就写哪个标志符

6.arguments

7.less运算

注意：除法必须加括号

两个有单位的值参与运算，最后结果以第一个值的单位为准颜色

8.less继承