持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
CSS的弊端
Css是一门非程序式语言，没有变量、函数、作用域等概念
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
- 不方便维护及拓展，不利于复用
- CSS没有很好的计算机能力
- 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
Less 介绍
Less：就是一门CSS预处理语言，它扩展了CSS的动态特性，使CSS具备一定的逻辑性、计算能力
注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件（后期项目阶段有更简单的方法）
我们可以使用less运算写法完成px单位到rem单位的换算
Less的使用
首先我们新建一个后缀名less的文件，在这个less文件里面书写less语句
css里能写的样式，less里也都能写，但是 less比css更强大
Less编译
本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，变异生成对应的CSS文件
所以，我们需要把我们的less文件，编译生成为CSS文件，这样我们的HTML页面才能使用
解决方案：
这个插件的作用：less文件保存自动生成CSS文件，只要一保存Less文件，他就会自动生成CSS文件，然后将生成的CSS文件引入到页面中就可以用
需要维护的时候，只需要修改less里的值，对应的CSS文件里的样式自动更改
Less变量
变量是没有固定的值，可以改变的，因为我们CSS中的一些颜色和数值等经常使用
变量名的规范：
//写在less文件里
//定义一个粉色的变量
@color:pink;
//某些元素使用变量
body{
background-color：@color;
}
div{
color:@color;
}
Less 嵌套
嵌套选择 两种情况：
第一种嵌套选择父选择器的（所有）后代：内层选择器的前面没有&符号，则它被解析为父选择器的后代
第二种嵌套选择交集选择器、伪类、伪元素选择器：内层选择器前有&符号，则它就被解析为选择当前选择器
嵌套 选择后代(所有)标签设置样式
.father{
width:200px;
height:200px;
background-color:pink;
a{
color:red;
}
}
less文件里显示的 和 保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：
.father{
width:200px + 2;
height:(200px / 10);
background-color:pink;
p {
a{
color:red;
}
}
}
less文件里显示的 和 保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：
嵌套 选择后代(所有)类设置样式
.father{
width:200px;
height:200px;
background-color:red;
.son{
color:red;
}
}
less文件里显示的 和 保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：
嵌套 选择交集选择器、伪类、伪元素选择器
&不生成后代选择器，表示当前选择器
加上&符号它就被解析为元素自身的伪类
a{
color:red;
&:hover{
color:pink;
}
}
less文件里显示的 和 保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：
.nav{
&::after{
content:"";
}
}
less文件里显示的 和 保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：
综合写法
.father{
width:200px + 2;
height:(200px / 10);
background-color:pink;
p {
a{
color:red;
&:hover{
color: pink;
}
}
}
.nav{
color: purple;
}
}
less文件里显示的 和 保存后自动生成SCC文件，并且里面的内容换成CSS样式写法：
Less运算
任何数字、颜色或者变量都是可以参与运算，就是less提供了加、减、乘、除算数运算
@border：5px + 5;
div{
width:20px + 50;
height:20px * 2;
border:@border solid red;
background-color:#666 - #333;
}
注意点：
1、加减乘除直接写计算表达式
2、除法需要添加小括号或.
3、多个单位运算以第一个单位为准
Less 里导入
一般加在less的开头位置
单引号双引号都可以
@import 后面要有空格
控制less导出css文件的位置
场景：在工作中，less是一个文件夹，css是一个文件夹，但是less保存，自动保存在它旁边
解决方法：
注意：
后面带上/ ，表示是CSS文件夹，以后在less里保存的时候，如果有CSS文件夹就直接用，没有css文件夹就自己创建一个css文件夹
想要所有的样式都保存到一样的文件里，配置插件就可以了
如果某个less文件有自己单独的导出路径，在这和less文件的第一行写导出路径的相关代码就行：
导出只有第一行有用，如果有两个导出，那就两个互相切换一下第一行
禁止导出CSS文件
想要保存less文件，他不保存出css文件，可以设置禁止导出
