很明显，Less的安装就比Sass，容易很多。而且在很多地方less和sass都差不多呀。具体看看官网：less.nodejs.cn/

1.安装

npm install less -g

2.测试

lessc -v

安装完以后，你就了可以使用lessc的命令了。

如果你是window系统，安装完less以后，执行lessc -v 会报：没有lessc的命令，如同这个

就去配置环境变量。你记得当初下载好nodejs以后，需要新建两个文件夹一个是node_global，另一个是node_cache。咱们npm i XXX -g 时候安装的所有文件都在这里。不信你去看看呗

这个地址写到环境变量里面就好了，然后再执行lessc -v即可。如果还不行，就重启下。

如果你是用nvm 管理了node，那么你下载包都放在 nvm 下面的node_global和node_cache里面。

此时你在vscode的命令行里面输入lessc -v出现

什么鬼，不是说好的lessc可以直接执行吗？怎么要打开文件？别急，你执行

npx lessc -v

一波三折呀，想用它可真的不容易呢，那就用它编译个less文件试试看

成功了！

3.集成webpack

npm i webpack webpack-cli -D

创建 webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    // 输出文件的目标路径
    path: path.resolve(__dirname, 'dist'),
    // 发布到线上的路径
    publicPath: '/my-new-public-path/',
    // 构建文件的名称
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader', // 将 JS 字符串生成为 style 节点
          'css-loader',   // 将 CSS 转化成 CommonJS 模块
          'less-loader'   // 将 Sass 编译成 CSS，默认使用 Node Sass
        ]
      }
    ]
  },
  devtool: 'source-map',//cheap-source-map,source-map,eval-source-map,hidden-source-map
};

安装这三个loader

npm i style-loader css-loader less-loader -D

配置package.json的命令行

咱们把打包好的js引入html看看，能不能用？

完美，现在的less就和你平常在vue和react里面的less一模一样了，开心不？谁说咱们前端开发者离开框架就不会下代码了？

4.对比 sass 学习 less

你别说sass的这些功能。less还都有呀。

上一节我们已经学习了sass，就不用一个一个过less的功能了，我们玩个找不同呗，看看 sass和less到底有哪些不一样？

相同之处

• 都属于 CSS 预处理器
• 目的是使得 CSS 开发更灵活和更强大
• 扩展的 CSS 功能特性基本相同

区别之处

1. Sass 是在服务端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass，而 Less 是在客户端处理的。

2. 从功能上来看： Sass 的功能比 Less 强大，Sass 可以说成是一种真正的编程语言。而 Less 只是一套自定义的语法及一个解析器，为 CSS 加入了动态语言的特性而已。

3. 从复杂性来看， Less 相对 Sass 清晰明了，安装便捷，易于上手，对编译环境要求比较宽松，适合小型项目。Sass 更适用于复杂或大型项目。

4. 下载完 Sass 以后执行 sass 命令可以直接将 scss 文件编译成 css 文件，此时会出现 2 个文件，一个是 .css 的文件，一个是.map文件，整个过程和 webpack 打包非常相似。但是 less 执行npx less index.less output.css 以后只出现 out.css 文件。

5. 对于申明变量而言， Sass 是 $ ， 而Less 是 @。

6. 对于条件语句而言，Sass 支持条件语句，可以使用 if...else.../for...while...each循环等编码，而 Less 则不支持。

7. 对于变量运算而言，Sass 需要带单位，Less 中的变量运算可以带或不带单位。

8. 对于附加功能而言，Sass 有工具库 Compass，简单说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系，Compass 是 Sass 的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了 Sass 的功能。Less 有 UI 组件库 Bootstrap，Bootstrap 是 Web 前端开发中一个比较有名的前端 UI 组件库，Bootstrap 的样式文件部分源码就是采用 Less 语法编写。

9. 对于输出设置而言，Sass 提供 4 种输出选项：nested/compact/compressed/expanded，输出样式的风格可以有 4 种选择，默认为 nested。而 Less 没有输出设置，

less基本的功能介绍：

1.变量声明用：@

2.函数：

if 函数

@width: 300px; 

.element { 
  width: if(@width > 400px, 400px, @width); 
}

boolean 函数

@test: boolean(10 > 5); 

.test-class { color: if(@test, red, black); }

length 函数

@list: 1, 2, 3, 4, 5; 

.length-example { 
  width: if(length(@list) > 10, 10px, 20px);
}

each函数

map函数

range函数

extract函数

其他不列举了有兴趣看官网吧！

3.混入:

在 Less 中，在引用混入的时候可以在其后面加上 !important关键字，这样混入的规则样式都使用!important 关键字。

混入定义个参数

4.嵌套

基本嵌套

伪元素嵌套

5.父级选择器（&）

6.@import 导入：用它可以导入less和css文件

7.继承语法

Less 使用 :extend 伪类来实现选择器之间的继承。

Sass/Scss 与 Less 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS，都具有变量、混入、嵌套、函数等特性，最终目的都是方便 CSS 的书写及维护。Less 和 Sass/Scss 互相促进互相影响，只是相比之下 Less 更接近 CSS 语法且更容易使用上手。 因此对于我个人来说，在实际开发中更倾向于选择 Less。