预处理器的十种语法 Less

Less 是一种 CSS 预处理语言。它扩展了 CSS 语言，添加了变量、mixin 和函数等功能，使 CSS 更易于维护、主题创建和扩展。

但是浏览器只能识别CSS语言，因此直接在浏览器上运行时将无法识别Less语言。我们需要通过一些方法将其转换为CSS，然后将CSS资源加载到浏览器中。

如何转换

根据不同的使用场景，我们可以分别使用包管理工具/CDN资源。

包管理工具

nodejs + webpack
在工程项目中，当我们使用webpack编译项目时，我们可以在模块中定义处理Less资源的方法。本质上，我们使用Less工具来转换Less资源，但在webpack中，我们使用相应的loader来处理它。 （需要安装less、less-loader）。

nodejs + gulp
Gulp 以流的形式执行定义的任务。它处理更少的资源。除了less工具之外，还需要安装gulp-less。

nodejs + vite
vite中无需再做任何配置，只需安装less工具即可。

CDN 资源

当不适合使用包管理工具时，可以直接引入CDN的LESS编译代码来实时处理LESS。

这里需要注意的是，link标签中定义的rel需要是stylesheet/less，这样后续的js资源才会将Less语法处理成CSS。

• rel="stylesheet"，会主动发送http请求获取css资源
• rel="stylesheet/less"，不会发送http请求
• rel="stylesheet/less" + 处理less的js资源，先请求js文件，然后发送css资源获取样式表

更少 CSS 预览

官方工具提供了Less-to-CSS代码的在线预览（Less-preview）。在这里您可以看到每种语法是如何转换的。了解后，您可以根据自己需要的场景进行选择。

语法

有了Less资源处理工具后，你就可以放心地开始编写Less语法了~

1。兼容CSS
Less 与 CSS 完全兼容。所有CSS代码都可以写。导入方法与CSS的用法一致。如果导入 .less 文件，则可以使用该文件中的所有变量。如果导入的文件具有 .less 扩展名，则可以省略扩展名。

2。使用变量
对于一些常用的主题颜色和字体，我们可能会使用固定的类名，并在需要时将类名叠加在标签上。这会产生大量的类名。以变​​量的形式，不需要多次添加类。

两种方法达到了相同的效果，但是Less语法更易于维护。

3。嵌套
CSS 中的语法不能嵌套。为了保证代码的可读性，我们需要按照一定的顺序定义从父元素到子元素的样式。但在Less中，就不存在这样的问题。采用逐层包裹的形式编写。亲子关系一目了然。

4。操作
计算功能不太好用。它不像函数那样可以更“智能”地将其转换成我们需要的结果，比如设置高度。它不进行单位转换，只是保留第一个单位，然后进行简单的加减运算。乘法和除法。

5。混合/混合
Mixing/混合 可以将多个 CSS 属性组合成一组值（例如设置线条显示样式以显示超出长度的椭圆）并将其插入到其他选择器中。使用选择器加括号，括号内也可以接受参数。

少写看似增加了代码量，但使用起来更加灵活。它可以组合使用并放置在任何需要的地方。

6。映射
将混合和映射结合起来可以弥补Less中无法自定义功能的问题。例如，您可以获取混合中定义的宽度并定义一个将 px 转换为 rem 的函数。

7。传承
语法：&:extend（选择器）。生成的代码与混合不同。混合直接将代码添加到末尾，而继承则使用联合选择器。

在开发中，mixins用得比较多，因为mixins更加灵活，语法更加简单，直接插入后生成的css语法可读性更强。

8。内置功能
除了 CSS 固有的 Linear-Gradient、calc、rgba 之外，Less 还扩展了一些功能，比如颜色转换 color、数组值提取、条件判断 if、向上取整 ceil 等。

9。适用范围
当查找变量时，首先在本地查找变量和 mixin，如果没有找到，则从“父”级别范围继承。

10。注意
CSS中只能使用块注释，Less中块注释和行注释都可以使用。

以上是Less语法的介绍。使用Less，我们可以编写更优雅、更易读、更易于维护的CSS代码。下一篇文章会介绍SASS的相关使用，以及更多关于前端、CSS、JavaScript》 。参考我的其他博文，持续更新~