前言
本文参考链接：Less-css预处理Node and VS扩展编译
Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。 — 百度百科
LESS 一种 动态 样式 语言.LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 — LESS « 一种动态样式语言
正文
1. 使用 node 来编译 less
- 打开命令行工具 ``` //全局安装 less npm install -g less
2. 在桌面新建一个 lesstest.less 文件，进行简单的编辑，进行编译时测试使用
body{ div{ background-color: red; } p{ background-color: green; } }
> 3. 在命令行中执行编译命令
//进入桌面 cd Desktop //编译当前目录下的 lesstest.less 文件 //编译命令 需要编译的文件(可以是绝对路径或相对路径找到该文件) 大于号(固定语法) 编译成功之后的文件名称(这里也可以加路径) lessc lesstest.less > lesstest.css
4. 这个时候会发现桌面新增了一个编译后的 lesstest.css 文件> 5. 在编辑器中打开如下，证明编译成功了> <br />##2. 使用 VS 扩展工具来编译 less ，这个工具不仅仅可以自动编译 less 还可以编译 sass<br />由于公司用的是 .NET，为了方便开发，使用的一直都是 [VS](https://baike.baidu.com/item/vs/14494077?fr=aladdin)1. 打开 VS 在最上方的菜单栏依次选择 工具 -> 扩展和更新> 2. 之后点击左侧的 【联机】 菜单按钮，等待之后便可以在右上角输入 `WEB Essentials` 之后中间就会有该扩展的相关信息列表，我这里已经下载过了，未下载时，点击列表左侧的 【下载】 按钮即可> 3. 之后就可以在你的项目中的 Content/ 目录下新建一个 lesstest 目录里面用鼠标右键依次选择 添加 -> less 样式表 ，然后输入你的 less 文件名称，这里我新建的是 Index.less 文件> 4. 鼠标双击 Index.less 文件，进行简单的编辑
/测试用页面样式表/ body{ div{ background-color:red; } p{ background-color:yellowgreen; } }
```
- 编辑时你会发现，编辑器会在右侧自动生成编译成 css 后的代码
- 而且在 Inde.less 自动生成了一些文件
- 在实际的 App_Start -> BundleConfig.cs 文件中引用样式时，直接写成 Index.css 即可，不需要写 .less 的后缀，相当的方便，在你的 Index.less 文件修改并
ctrl + s保存之后右侧的 Index.css 文件也会自动的进行改变，这样接可以了，发步项目时会自动的引用 .css 文件
若有收获，就点个赞吧
0 人点赞
