Less 学习笔记

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin(混合)、函数等特性，使 CSS 更易维护和扩展。
Less可以运行在客户端，也可以借助Node.js在服务端运行。

Less是一个CSS预处理器。编译后，它会生成简单的CSS，适用于浏览器。
由于Less使用嵌套，使得代码更短、更干净，并以特定的方式组织
Less是用JavaScript编写的，用于编译less格式的css,然后编译成css格式的。
只有在引入的css都是less格式时，才需要引入less.js文件，如果引入的是css格式，那就不用引入less.js去编译了

前端预处理器语言图形编译工具——Koala App
vs code编译插件 easy less

开始学习
使用less的话css就可以嵌套书写，代码更短，更干净。
less自适提高编码效率，最终运行的还是css文件

注释003
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中,也就是在编译后的css文件中会显示出来，也是注释

变量004
@开头定义变量
less里的变量是块级作用域
改一个变量名就可以改掉应用该变量的所有属性值，从而使得更改的时候更加方便
如果把属性名或者选择器或者url作为变量，@{属性名或者选择器或者url}
less变量的延迟加载：
less中的加载是有延迟的
它会在当前作用域样式未加载之前先加载变量，而且是由内而外，先寻找作用域内的变量，如果没有再去寻找作用域外的变量

嵌套规则005
&这个符号用于嵌套————平级关系————平级关系————平级关系，比如在hover的时候这么写，要不然会有空格&:hover{...}

less的混合006
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
混合的调用，当两个或以上的多个部分的属性相同时可以使用一个混合来调用
.混合名(){属性名:属性值;属性名:属性值;}
带参数的混合006_3
.chongfu(){}
带参数并且有默认值的混合
.chongfu(@w:10px,@h:10px,@b:pink){}
调用的时候可以不写默认值: .chongfu();
命名参数006_4
匹配模式006_5
引入less
@import "triangle.less";
可以加入标识符，标识符是自定义的，引入的时候也要有标识符
.triangle(T,@w,@s,@c)
arguments变量006_2
这个东西基本上没什么用

less里的数学计算
计算的双方只需有一个带单位就可以
width: (100 + 100px);
转换后：
width: 200px;

less继承008
:extend是一个伪类，使用它的选择器，将和它引用的选择器一起使用它引用的选择器的样式，如：
先定义一个扩展的选择器，我们就叫它 .a，然后定义一个选择器 .b（用来扩展），在 .a内使用 :extend 扩展，代码如下
.a{
    &:extend(.b);  //这里的 & 为 父选择符，代表的 父选择符 .a 扩展 .b
    font-size: 12px;
}
.b{
    font-weight: bold;
}
输出
.a {
  font-size: 12px;
}
.b,
.a {
  font-weight: bold;  //这里 a 扩展也引用了 b 的样式
}
如果样式在:entend后边的样式有其它效果要加all，比如hover， &:extend(.juzhong all); hover如果没效果在样式里加!important

less避免编译009
格式：
 ~"这里是内容"
Less 学习笔记 ​

Less 学习笔记
