Less(css预处理器)详解
Less介绍
less是一种css语言的预处理器，是用来书写css的工具。
通俗的说，CSS预处理器是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。
什么是预处理(预编译)
在Less文件中，less代码格式并不能被浏览器识别。想将Less文件代码变成css代码，必须先将这个Less文件预先进行处理。
预处理的就可以将Less文件代码转换为css代码。
Less使用流程
- 先创建less文件
创建一个less文件，扩展名为less，在这个文件内编写less代码
- 转换为css文件
使用编辑器上安装插件或命令来将less文件转换为css文件
编辑器上安装的less插件在对less文件进行保存时，会自动对less文件内的代码转换为css代码，并保存为css文件，以备html引入
- html文件中引入css文件
在html文件中引入的是转换后的css文件，并不是原less文件。
浏览器根本不识别less代码，仅实现转换后的css代码。
Less的语法
1.变量
- 变量的作用
变量用于存储数据，数据只要指的是css中多次使用的数值(尺寸、字体大小)或字符串(颜色单词)。
css中的数据指的是冒号右侧的内容。
- 变量的语法
@变量名:数据
2、混入
- 混入的作用
将一段css代码，引入到另一个选择器中。
- 混入的语法
.类名()
3、 嵌套
- 嵌套的作用
将后代选择器的代码书写在父选择器的大括号内，提高代码的可读性。
- &符号
- 作用
用于表示当前选择的元素的本身，主用于给伪类添加样式更方便。
5、导入
- 作用
在一个less文件中引入多个css文件，可以减少html文件中的link标签的数量(提高代码的简洁性)
在实际项目中会有多个css文件，导入的本质就是将多个css文件合并到一个文件中
- 语法
@import “导入的文件名”;
ps:每天一点小收获