Less预处理器教程
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学，可以点心心支持一下哈
一、Less介绍
less官方文档 lesscss.org/
less中文文档 less.bootcss.com/
less是一种css预处理器，它扩展了css语言，提供了变量、嵌套、混合、运算等功能，使样式表的编写更加灵活和高效，用来书写css的工具。
通俗的说，less是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。
二、什么是预处理(预编译)
预处理（或预编译）就像在做甜点之前，你有一份简单的食谱（css），但你想要加入一些特殊的烘焙材料，以便更方便地制作美味的点心。less 就是你的烘焙助手，负责在烘焙之前对这份食谱进行一些特殊的处理，通过预处理，让你更轻松、更有创意地制作出令人垂涎欲滴的点心。 预处理就可以将less文件代码转换为css代码。
注意在less文件中，less代码格式并不能被浏览器识别。想将less文件代码变成css代码，必须先将这个less文件预先进行处理。
三、Less的使用
1. 安装Less
首先，确保你的项目中已经安装了less。你可以使用npm安装less：
npm install -g less或者通过CDN在HTML文件中引入less：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>2. 基础语法
变量
在LESS中，你可以使用变量来存储和重用值。变量以@符号开头。
@width: 100px;
@height: @width + 10px;#header {width: @width;height: @height;background-color: aqua;
}在这个例子中，@width是一个变量，它的值是100px。在#header中，我们使用了这个变量来设置背景颜色。
嵌套
LESS允许你使用嵌套规则，使样式表更加清晰和结构化。
nav {ul {margin: 0;padding: 0;list-style: none;}li {display: inline-block;margin-right: 5px;a {text-decoration: none;&:hover {text-decoration: underline;color: red;}}}
}在这个例子中，nav规则包含了嵌套的ul、li和a规则。这样可以更容易地理解和组织样式。
混合（Mixin）
混合允许你在一个样式规则中引入另一个样式规则的属性。
.border-radius(@radius) {border-radius: @radius;-webkit-border-radius: @radius;-moz-border-radius: @radius;
}.button {.border-radius(5px);
}在这个例子中，.border-radius是一个混合，它接受一个@radius参数，并在.button规则中使用该混合来添加圆角边框。
导入其他Less文件
你可以使用@import导入其他less文件，将样式表模块化。
@import "reset";
@import "variables";
@import "mixins";这个例子展示了如何导入名为reset.less、variables.less和mixins.less的文件。这样可以将样式表分割成更小的部分，使代码更易维护。
3. 运算
less允许进行基本的数学运算，这对于处理尺寸和颜色等方面很有用。
@base: 30px;
@padding: @base * 2;.element {margin: @base + 5px;padding: @padding;background-color: aqua;
}在这个例子中，@padding的值是@base乘以2。less会自动计算结果，你可以在样式规则中直接使用这些运算结果。
4. 函数与操作
less内置了一些函数和操作，用于处理颜色、字符串和其他数据类型。
@color: #3498db;.darken-bg(@color, @percent) {background-color: darken(@color, @percent);
}.container {.darken-bg(@color, 10%);
}在这个例子中，darken是less内置的颜色函数，我们通过darken函数降低背景颜色的亮度。
5. 条件语句
less支持使用条件语句，根据条件选择应用样式。
@width: 100px;.condiction {width: @width;height: @width;& when (@width > 500) {background-color: red;}& when (@width <= 500) {background-color: blue;}
}在这个例子中，使用& when语法根据@width的值应用不同的背景颜色。
6. 循环
less还支持循环，允许你重复应用样式。
.loop(@counter) when (@counter > 0) {.class-@{counter} {width: @counter * 10px;}.loop(@counter - 1);
}.loop(5);在这个例子中，.loop混合使用了递归来创建一系列带有不同宽度的样式类。
7.嵌套规则的作用域
嵌套规则在less中有自己的作用域，这意味着你可以更灵活地组织样式。
#header {h1 {font-size: 26px;}
}#footer {h1 {font-size: 18px;}
}在这个例子中，h1规则在#header和#footer中分别有不同的作用域。
8.字符串插值
字符串插值允许你在样式中动态使用变量。
@property: color;.widget {@{property}: #888;background-@{property}: red;
}在这个例子中，使用@{}语法插入变量，创建动态的属性名称。
9. 编译Less
要在本地编译 less 文件，你可以使用 lessc 命令行工具。首先，确保你已经在终端或命令提示符中安装了 less：npm install less -g
然后，在less文件所在目录运行以下命令：
lessc your-styles.less output.css其中，your-styles.less 是你的less文件，output.css 是输出的css文件。 或者使用构建工具，如webpack、gulp等，配置相应的less插件进行自动编译。 编译完成后，你可以在浏览器中链接到生成的css文件，以查看效果。