关键词：
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的内容可以参考我其它的博文，持续更新中~
css预处理器sass和less(代码片段)
文章目录CSS预处理器什么是CSS预处理器Sass和LESS背景介绍Sass背景介绍LESS的背景介绍Sass安装Sass下载Ruby安装文件安装Ruby安装Sass编译Sass命令行编译命令行编译配置选项四种编译排版演示nested编译排版格式expanded编译排版格式compact... 查看详情
less基础(代码片段)
less基础／2-1功能介绍和开发中的问题处理less预处理器解决的问题：复用、减少冗余、模块化、可维护。变量支持，选择器嵌套处理(BEM)，条件逻辑，引用其他样式(Mixin)，增强import。开发碰到的典型问题： 常见的css预处理器... 查看详情
这十个python语法，让你的代码更为精炼高效！(代码片段)
...就大错特错了。本文精心筛选了最能展现Python语法之精妙的十个知识点，并附上详细的实例代码。如能在实战中融会贯通、灵活使用，必将使代码更为精炼、高效，同时也会极大提升代码B格ÿ 查看详情
03-less详解(代码片段)
title:03-Less详解publish:trueCSS预处理器为什么要有CSS预处理器CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句... 查看详情
djangorestframework的十个组件
...页面，可以方便的测试自己的API。简单说一下这个工具包的十个功能：1.权限2.认证3.访问频率4.序列化（使用最多）5.路由6.视图7.分页器8.解析器9.渲染器10.版本 查看详情
java日期处理易踩的十个坑
前言整理了Java日期处理的十个坑，希望对大家有帮助。1.用Calendar设置时间的坑反例：Calendarc=Calendar.getInstance();c.set(Calendar.HOUR,10);System.out.println(c.getTime());运行结果：ThuMar2622:28:05GMT+08:00解析：我们设置了10小时，但运行结果是22点... 查看详情
css预处理器---less
三、Less语法 （1）变量1//less代码2@nice-blue:#5B83AD;3@light-blue:@nice-blue+#111;4#header{5color:@light-blue;6}78//css输出9#header{10color:#6c94be;11}1213//将变量名定义为变量14@fnord:"Iamfnord";15@var:‘fnord‘;16content: 查看详情
web前端之less简介(代码片段)
...量其他五、混合函数六、补充一、less简介less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性：像对变量的支持、对mixin的支持…less的语法大体上和... 查看详情
网页搜索（百度谷歌）你不得不知道的十个小技巧(代码片段)
网页搜索（百度谷歌）你不得不知道的十个小技巧百度搜索广告多，谷歌搜索搜不到东西，这时候，你得问问自己——你，用对姿势了么？文章目录网页搜索（百度谷歌）你不得不知道的十个小... 查看详情
sassless和stylus区别总结(代码片段)
1.什么是CSS预处理器CSS预处理器是一种语言用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS更见简洁，适应性更... 查看详情
less预处理——变量和嵌套(代码片段)
系列文章目录文章目录系列文章目录一、Less变量1、选择器变量2、属性变量3、url变量4、声明变量5、变量运算6、变量的作用域7、用变量去定义变量二、Less嵌套1、&的使用2、媒体查询3、小技巧：添加私有样式一、Less变量1... 查看详情
stylusless和sass的区别
CSS预处理器技术已经非常的成熟了，而且也涌现出了越来越多的CSS的预处理器框架。本文便总结下Sass、LessCSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是CSS预处理器CSS预处理器是一种语言用来为CSS增加一些编程的... 查看详情
sass入门及知识点整理(代码片段)
...现在就来整理一下关于Sass的。因为这两种都是CSS的主流预处理器，当然还有Stylus。 要解释一下什么是Sass吗？Sass和Less一样都是CSS预处理器。CSS预处理器通俗来讲就是用它们专有的语法来写CSS，然后再 查看详情
160907css预处理器-less
CSS预处理器是什么？一般来说，它们基于CSS扩展了一套属于自己的DSL，来解决我们书写CSS时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使... 查看详情
less一些选择器(代码片段)
Less常见的预处理语言：LessSassStylusLess学习使用Less的方式页面引入js代码文件解析1、我们可以直接在客户端使用.less（LESS源文件），只需要从http://lesscss.org下载less.js文件，然后在我们需要引入LESS源文件的HTML中加入如下代码,也可... 查看详情
css即将支持嵌套，sass/less等预处理器已无用武之地？(代码片段)
...CSSVariable）的大规模兼容，到如今CSS即将支持嵌套，一些预处理器的核心功能已经被CSS原生支持，这是否表示SASS/LESS等预处理器已无用武之地？ 查看详情
在java中记录日志的十个小建议(代码片段)
JAVA日志管理既是一门科学，又是一门艺术。科学的部分是指了解写日志的工具以及其API，而选择日志的格式，消息的格式，日志记录的内容，哪种消息对应于哪一种日志级别，则完全是基于经验。从过去的实践证明，JAVA的日志... 查看详情
值得收藏面试会用到的十个常用的数组方法js实现(代码片段)
【手撕代码系列】之十个常用的数组方法JS实现（一）🚀通俗易懂的实现方式，帮助我们认识相应的方法📚收藏本系列，基础进阶两不误🎉本系列持续更新，欢迎查看线上地址写在前面代码实现系... 查看详情