共计 1872 个字符，预计需要花费 5 分钟才能阅读完成。
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 扩展名，则能够将扩展名省略掉。
二、应用变量
有些罕用的主题色、字体，咱们可能会应用一个固定的类名，当须要应用的时候在标签上叠加类名，这样使得类名很多，通过变量的模式，无需再屡次增加类。
两种形式达到的成果是统一的，然而 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 的内容能够参考我其它的博文，继续更新中~
