前言
本文参考链接：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
- 在桌面新建一个 lesstest.less 文件，进行简单的编辑，进行编译时测试使用
body{
div{
background-color: red;
}
p{
background-color: green;
}
}
image.png
- 在命令行中执行编译命令
//进入桌面
cd Desktop
//编译当前目录下的 lesstest.less 文件
//编译命令 需要编译的文件(可以是绝对路径或相对路径找到该文件) 大于号(固定语法) 编译成功之后的文件名称(这里也可以加路径)
lessc lesstest.less > lesstest.css
- 这个时候会发现桌面新增了一个编译后的 lesstest.css 文件
image.png
- 在编辑器中打开如下，证明编译成功了
image.png
2. 使用 VS 扩展工具来编译 less ，这个工具不仅仅可以自动编译 less 还可以编译 sass
由于公司用的是 .NET，为了方便开发，使用的一直都是 VS
- 打开 VS 在最上方的菜单栏依次选择 工具 -> 扩展和更新
image.png
- 之后点击左侧的 【联机】 菜单按钮，等待之后便可以在右上角输入
WEB Essentials之后中间就会有该扩展的相关信息列表，我这里已经下载过了，未下载时，点击列表左侧的 【下载】 按钮即可
image.png
- 之后就可以在你的项目中的 Content/ 目录下新建一个 lesstest 目录里面用鼠标右键依次选择 添加 -> less 样式表 ，然后输入你的 less 文件名称，这里我新建的是 Index.less 文件
image.png
- 鼠标双击 Index.less 文件，进行简单的编辑
/*测试用页面样式表*/
body{
div{
background-color:red;
}
p{
background-color:yellowgreen;
}
}
- 编辑时你会发现，编辑器会在右侧自动生成编译成 css 后的代码
image.png
- 而且在 Inde.less 自动生成了一些文件
image.png
- 在实际的 App_Start -> BundleConfig.cs 文件中引用样式时，直接写成 Index.css 即可，不需要写 .less 的后缀，相当的方便，在你的 Index.less 文件修改并
ctrl + s保存之后右侧的 Index.css 文件也会自动的进行改变，这样接可以了，发步项目时会自动的引用 .css 文件
