less
Less(Leaner Style Sheets的缩写) 是一门css扩展语言，也成为Css预处理器。它扩展了css的动态特性。
- 引入变量
- Mixin(混入)
- 运算
- 函数
less安装
``` 1.安装node node -v 2.sudo npm install -g less lessc -v ```less 变量
变量是指没有固定的值，可以改变的，因为css中的一些颜色和树枝等经常使用。
``` @变量名：值； //定义一个粉色的变量 @color：pink； //定义一个字体为14px的变量 @font14:14px; body{ background-color:@color; } div{ color:@color; font-size:@font14; } ```less 编译
本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。
so,需要把less文件，编译生成css文件，html页面才能使用。
``` vscode 插件 easy less ```less 嵌套
``` 1.子元素的样式直接写到父元素里面就好了 #header{ .logo{ 300px; } } 2.伪类，交集，伪元素选择器(前面加 &） a{ color:red; &:hover{ color:pink; } } ```less 运算
任何数字，颜色或者变量都可以参与运算，就是less提供了+ - * / 算数运算
``` @border:5px + 5; div{ //运算符左右两侧必须敲一个空格 //两个参数运算 如果只有一个数有单位 则最后的结果就以这个单位为准 //如果两个数都有单位，而且不一样的单位？最后的结果以第一个单位为准 82 / 50rem; height:200px; border:@border solid red; } ```