1. 维护CSS的弊端
CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
2. Less介绍
Less(Leaner Style Sheets 的缩写) 是一门CSS扩展语言，也称为CSS预处理器。
作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，less可以让我们用更少的代码做更多的事情。
Less 中文网址：Http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
总结：Less是一门CSS预处理语言，它扩展了CSS的动态特性
3. Less 安装
- 安装nodejs，网址：http://nodejs.cn/download/
- 检查是否安装成功，使用cmd命令(window + r 打开 输入cmd) — 输入“node -v” 查看版本即可
- 基于nodejs在线安装Less，使用cmd命令“npm install -g less”, 即可
- 检查是否安装成功，使用cmd命令“lessc -v“ 查看版本即可
Less 使用
首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。
- Less使用
- Less编译
- Less嵌套
- Less运算
4. Less 变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
语法：
@变量名:值;
1. 变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
// 定义一个粉色的变量
@color:pink;
// 定义一个 字体为14像素的变量
@font14:14px;
body{
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
5. Less 编译
本质上，Less包含一套自定义的语法及一个解析器。用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以，我们需要把我们的less文件，编译生成为CSS文件，这样我们的html页面才能使用。
vscode Less 插件
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件，只要保存一下Less文件，会自动生成CSS文件。
6. Less嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
// less嵌套 子元素的样式直接写到父元素里面
a {
color: purple;
}
}
如果遇见(交集|伪类|伪元素选择器)
- 内层选择器的前面没有&符号，则它被解析为父类选择器的后代；
- 如果有&符号，它就被解析为父元素或父元素的伪类。
a {
color: purple;
// 如果有伪类、交集选择器、伪元素选择器 我们内层选择器的前面需要加&
&:hover {
color: red;
}
}
7. Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算
@border:5px + 5;
div {
width: 200px - 50;
height: 200px * 2;
border: @border solid red;
}
img {
width: 82 / 50rem;
height: 82 / 50rem;
}
以上代码编译结果:
div {
width: 150px;
height: 400px;
border: 10px solid red;
}
img {
width: 1.64rem;
height: 1.64rem;
}
注意：
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
