css预处理器Less

css预处理器有：less、sass、stylus等

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

使用原生css编写样式时，没有嵌套的话，逻辑关系不明确，如果代码很多，要想改动代码就显得较为困难
使用less编写代码变得更加高效

官网：Getting started | Less.js

BootStrap网站的less文档：https://less.bootcss.com/

vscode安装插件:

Easy Less vscode插件作用：Less文件自动保存生成css文件

注释：

第一种注释：模板注释

// 模板注释 这里的注释转换成CSS后将会删除

因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后，这种注释会被删除（毕竟 css 不识别这种注释）。

第二种注释：CSS 注释语法

/* CSS 注释语法 转换为CSS后让然保留 */

总结：如果在less中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。

运算：

加、减、乘直接书写计算表达式

除法需要添加小括号或.（加点会报红色，Less版本4之前可以直接书写/号）

@fontSize: 20;
h1{font-size: @fontSize+10px;
}

定义变量：

存储数据，方便使用和修改

语法：

@变量名:值;             //定义变量格式
@rootSize:37.5rem;     //例子
css属性:/@变量名;       //使用变量
font-size:@rootSize    //使用例子

使用嵌套：

可快速生成后代选择器

#parent{width: 400px;height: 300px;background-color: blue;#son{width: 200px;height: 200px;background-color: yellow;/*&相当于对嵌套父级的引用。如果有&，则会解析成"#parent #son:hover"如果没有&,则会解析成"#parent #son :hover"*/&:hover{background-color: pink;}}
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式。简单理解就是，封装一个函数，然后在需要使用的地方进行调用，会把内容完全拷贝
        1.普通混合
        2.不带输出的混合
        3.带参数的混合
        4.带参数并且有默认值的混合
        5.带多个参数的混合
        6.命名参数的混合
        7.匹配模式
        8.arguments变量

普通混合

混合的定义可以是.或者#开头

//下面混合的定义会编译到css文件中---带输出的混合
//.style0{}
// 不想编译到css文件中,则添加括号 --不带输出的混合
.style0(){width: 100px;height: 100px;
}
#son{.style0;background-color:pink;
}

带参数的混合

// 可以为参数赋默认值
.style1(@w,@h,@c:orange){width: @w;height: @h;background-color: @c;
}#son{.style1(50px,50px,green);margin: 20px auto;
}

命名参数的混合

在调用时指定要传入的形参

.style2(@w:100px,@h:100px,@c:green){width: @w;height: @h;background-color: @c;
}
#son{.style2(@c:yellow);margin: 20px auto;
}

匹配模式：

将公共的样式和独立的样式抽离，less编译时会将所有的样式整合在一起

<div id="parent"><div id="son">son</div>
</div>

style.less

.styleBorderColor(@position,@color){border-width: 10px;border-style: solid;border-color: transparent;
}
.styleBorderColor(top,@color){border-top-color: @color;
}
.styleBorderColor(right,@color){border-right-color: @color;
}
.styleBorderColor(bottom,@color){border-bottom-color: @color;
}
.styleBorderColor(left,@color){border-left-color: @color;
}

index.less

@import './style.less'#son1{width: 100px;height: 100px;background-color: yellow;.styleBorderColor(bottom,purple)
}

arguments变量:

.style5(@width,@style,@color){border:@arguments;
}#son{.style5(10px,solid,green);
}

less避免编译:

在less编写任何内容，less都会帮我们进行编译，如果不想要less帮忙编译的话则使用~"不想编译的内容"这种形式。比如calc是浏览器可以自行运算的，我们想要浏览器帮忙计算即可

@w: 20;
#parent{width: ~"calc(100px*2)";
}

less继承:

特点：

性能比混合高
灵活度比混合低

注意：继承 不支持 参数

<div id="parent"><div id="son1">son1</div><div id="son2">son2</div>
</div>

混合模式：

.style_son(@color){width: 100px;height: 100px;background-color: @color;
}#parent{width: 300px;height: 300px;background-color: aqua;margin: 30px auto;#son:nth-child(1){.style_son(orange);}#son:nth-child(2){.style_son(pink);}
}

继承方式：

// 注意不能接收参数
.style_son{width: 200px;height: 200px;
}
.style_son:hover{background-color:yellow !important;
}#parent{width: 300px;height: 300px;background-color: aqua;margin: 30px auto;// 下面会等价于 .style_son,#parent .son然后应用.style_son的规则//.son:extend(.style_son){.son{// 等价于上面//&:extend(.style_son);// 获取.style_son的所有状态 即包括 hover&:extend(.style_son all);&:nth-child(1){background-color: orange;}&:nth-child(2){background-color: red;}}
}

导入：

能够使用Less导入写法引用其他Less文件

@import"文件路径" //如果导入的是less文件，可以省略后缀.less
@import 'base.less'
@import 'base'

导出：

导出css文件

方法一：配置EasyLess插件，实现所有Less有相同的导出路径

配置插件：设置->搜索EasyLess->在setting.json中编辑->添加代码（必须是双引号）

"less.compile":{"out":"../css/"     //上级目录的css文件下
}

方法二：Less-导出-单独路径

// out: ./abc/            //当前less第一行
// out: ./abc/abc.css     //还可控制导出名称

禁止导出：

//out:false            //在此less文件第一行添加

注：公共less,被其他导入的less.不用生成css

文章部分内容参考了的文章CSS预处理器-Less - ^Mao^ - 博客园