什么是Less

Less是一个Css预编译器，意思指的是它可以扩展Css语言，添加功能如允许变量（variables），混合（mixins），函数（functions）和许多其他的技术，让你的Css更具有维护性，主题性，扩展性。

Less官方网站

英文：http://lesscss.cn/
中文：https://less.bootcss.com/

传统Css写法与Less写法

css写法与less写法简单对比（下面两段代码实现的效果是一样的）
style.css文件

 .content ul {
    
    
    list-style:none;
  }
  .content li {
    
    
	height: 25px;
	line-height:25px;
	padding-left:15px;
	background: url("arr.jpg") no-repeat center left;
  }
  .content li a {
    
    
    text-decoration: none;
    color: #535353;
    font-family: microsoft yahei,"黑体",Arial,Simsun,"Arial Unicode MS",Mingliu,Helvetica;
  }

style.less文件

@charset "UTF-8";
 .content{
    
    
  ul {
    
    
    list-style:none;
  }
  li {
    
    
	height: 25px;
	line-height:25px;
	padding-left:15px;
	background: url("arr.jpg") no-repeat center left;
  }
  li a {
    
    
    text-decoration: none;
    color: #535353;
    font-family: microsoft yahei,"黑体",Arial,Simsun,"Arial Unicode MS",Mingliu,Helvetica;
  }
}

less中的注释

方式1：//
以 // 开始的注释，不会被编译到css文件中

方式2：/**/
以 /**/ 包裹的注释会被编译在css文件中

如何使用Less

less文件只有在被编译之后才能够被浏览器识别使用，所以要先使用Less编译工具对 .less 进行编译（就是将 .less 转换成 .css ）。

使用方式1：
安装Less编译工具
1.Koala，国人开发的全平台的Less编译工具，网址：http://koala-app.com/
2.WinLess，Windows下的Less编译软件
3.CodeKit，MAC平台下的Less编译软件，网站：https://codekitapp.com/

koala 的使用，将项目拖到koala软件，然后点击编译就会根据项目里面的 less文件生成一个新的css文件，然后在项目中引入css文件就可以

使用方式2：
在客户端调试
首先引入.less文件，注意引用时使用link引入，然后将rel属性设置为rel=“stylesheet/less”，
然后引用less.js，与引入普通js方式一样，但是一定要放置在less样式文件之后。

less.js文件（在less的官网首页可以看到），这种方式生成的css是放在了引入less的link标签下面的style标签里面，也就是内联的方式

<link rel="stylesheet/less" href="style.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

使用方式3：
在vscode中安装 EasyLESS 插件并启用 ，然后直接写.less文件，当保存的时候会自动生成.css文件的，在项目中引入生成的css文件即可