预处理器 Less 的十个语法

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

不过浏览器只能识别 CSS 语言，所以 Less 语言直接运行在浏览器端是不被识别的，需要我们通过一些方式将其先转成 CSS，再将 CSS 资源加载到浏览器中。

如何转换

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

包管理工具

nodejs + webpack
在工程化项目中，我们使用 webpack 来对项目进行编译时，可以在 module 中定义处理 Less 资源的方式，本质上是使用 Less 工具来对 Less 资源进行转换，但 webpack 中是使用对应的 loader 来处理（需要安装 less、less-loader）。

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

nodejs + vite
vite 中不需要多做任何配置，只需安装 less 工具。

CDN资源

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

<link rel="stylesheet/less" href="./basic.less"> 
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

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

• rel=“stylesheet”，会主动发送http请求获取css资源
• rel=“stylesheet/less”，不会发送http请求
• rel=“stylesheet/less” + 处理less的js资源，先请求js文件，再发送获取stylesheet的css资源

Less转CSS预览

官方提供了可在线预览Less转CSS代码的工具（Less-preview），在这里可以看到每个语法到底做了怎样的转化，了解后更能按照自己所需要的场景选择。

语法

有了Less资源的处理工具后，可以开始放心大胆的编写Less语法啦~

一、兼容css
Less 是完全兼容 CSS 的，所有 CSS 代码都可以编写，导入的方式和 CSS 的用法是一致的，导入一个 .less 文件，此文件中的所有变量就可以全部使用，如果导入的文件是 .less 扩展名，则可以将扩展名省略掉。

二、使用变量
有些常用的主题色、字体，我们可能会使用一个固定的类名，当需要使用的时候在标签上叠加类名，这样使得类名很多，通过变量的形式，无需再多次添加类。

三、嵌套
CSS 中语法不能嵌套，为了保证代码的可阅读性，我们需要按照一定的顺序将样式依次从父元素定义到子元素，但在 Less 中就没有这个困扰，像层层包裹的形式来书写，可以清晰的看到父子级关系。

四、运算
运算这个功能不算好用，并不会像函数一样，比较“智能”的转换成我们需要的结果，比如设置高度，它没有进行单位转换，只是保留第一位的单位，再简单的加减乘除。

五、混入/混合
混入/混合 可以将多个css属性合成一组值（比如设置一行展示，超出长度显示省略号的样式），插入到其它选择器中。通过选择器加上小括号的形式使用，括号内也可以接受参数。

Less编写看起来是代码量变多，但使用起来却是更加灵活，能将它作为一个组合来使用，随意放置到所需要的地方。

六、映射
将混合、映射结合起来使用，可以弥补Less中不能自定义函数的缺陷，比如可以获取混入中定义的宽度，定义px转换rem的函数。

七、继承
语法：&:extend(选择器)，生成的代码与混入不同，混入是直接将代码加到后面，继承用的是并集选择器。

开发中用混入更多，因为混入更灵活、语法更简洁、直接插入后面生成的css语法阅读性更强。

八、内置函数
除了 CSS 本身就有的 linear-gradient、calc、rgba，Less 还拓展了一些函数，比如颜色转换 color，数组取值 extract，条件判断 if，向上取整 ceil。

九、作用域
在查找一个变量时，首先在本地查找变量和混合， 如果找不到，则从“父”级作用域继承。

十、注释
在css中，只能使用块注释，在Less中，块注释和行注释都可以使用。

以上就是 Less语法的介绍， 通过 Less，我们可以编写出更优雅、可读性更强、更易维护的 CSS 代码。下一篇将介绍 SASS的相关使用，更多有关 前端、CSS、JavaScript的内容可以参考我其它的博文，持续更新中~