Less(css预处理器)详解

Less介绍

less是一种css语言的预处理器，是用来书写css的工具。

通俗的说，CSS预处理器是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。

什么是预处理(预编译)

​ 在Less文件中，less代码格式并不能被浏览器识别。想将Less文件代码变成css代码，必须先将这个Less文件预先进行处理。

预处理的就可以将Less文件代码转换为css代码。

Less使用流程

1. 先创建less文件

创建一个less文件，扩展名为less，在这个文件内编写less代码

2. 转换为css文件

使用编辑器上安装插件或命令来将less文件转换为css文件

编辑器上安装的less插件在对less文件进行保存时，会自动对less文件内的代码转换为css代码，并保存为css文件，以备html引入

3. html文件中引入css文件

在html文件中引入的是转换后的css文件，并不是原less文件。

浏览器根本不识别less代码，仅实现转换后的css代码。

Less的语法

1.变量

• 变量的作用

变量用于存储数据，数据只要指的是css中多次使用的数值(尺寸、字体大小)或字符串(颜色单词)。

css中的数据指的是冒号右侧的内容。

• 变量的语法

@变量名:数据

2、混入

• 混入的作用

将一段css代码，引入到另一个选择器中。

• 混入的语法

.类名()

3、 嵌套

• 嵌套的作用

将后代选择器的代码书写在父选择器的大括号内，提高代码的可读性。

4. &符号

• 作用

用于表示当前选择的元素的本身，主用于给伪类添加样式更方便。

5、导入

• 作用

在一个less文件中引入多个css文件，可以减少html文件中的link标签的数量(提高代码的简洁性)

在实际项目中会有多个css文件，导入的本质就是将多个css文件合并到一个文件中

• 语法

@import “导入的文件名”;

ps:每天一点小收获