<html> <head> <title></title> <link type="text/css" href="https://www.jb51.net/style/main.css" /> </head> <body> <div> </div> </body> </html>
样式库base.less文件内容：
.base-nav{ height: 50px; background-image: url(img/nav.png); } .base-debug{ border: solid 5px red; }
main.less文件内容：
@import (reference) "base.less"; @env:release; //编译模式：release或debug /* 导航栏 */ .nav:extend(.base-nav){ // 编译模式为debug时采用该样式 & when (@env=debug){ .base-debug(); } }
我们一般将工程代码级别的产出分为源码、可执行代码 和可发布代码 三种，而可执行代码和可发布代码的构建需求是不同的，因此构建方式也有所区别，也就是lessc使用的选项也会不同。下面将针对不同的产出物来介绍lessc的使用。
1. 可执行代码
我将可执行代码部分再细分为release和debug两种编译模式，可以看到通过变量@env来实现不同模式下采用不同的样式规则。默认采用release模式编译源码。
lessc --include-path=lib/less --relative-urls --source-map --source-map-rootpath=../../src/less/main.less src/less/main.less bin/style/main.css
在执行lessc命令时通过选项--modify-var="env=debug"即可以debug模式编译源码。
lessc --include-path=lib/less --relative-urls --source-map --source-map-rootpath=../../src/less/ --modify-var="env=debug" src/less/main.less bin/style/main.css
可以看到上述编译过程中均会生成sourcemap文件以便调试使用。
2. 可发布代码
对于发布的内容我们会对其进行压缩处理
lessc --include-path=lib/less --clean-css="advanced" --relative-urls src/less/main.less dist/app/style/main.css
由于sourcemap文件仅在开发阶段有用，因此生成发布代码时就不要生成了。
完整的构建文件build.bat如下：
@echo off cls goto :%1 :bin echo Building...... ::remove subitems of bin rd /S /Q bin ::copy html files xcopy /y src\*.html bin\ ::compile less to css cmd /C lessc --include-path=lib/less --relative-urls --source-map --source-map-rootpath=../../src/less/main.less src/less/main.less bin/style/main.css echo Building is over! goto :over :debug echo Building...... ::remove subitems of bin rd /S /Q bin ::copy html files xcopy /y src\*.html bin\ ::compile less to css cmd /C lessc --include-path=lib/less --relative-urls --source-map --source-map-rootpath=../../src/less/ --modify-var="env=debug" src/less/main.less bin/style/main.css echo Building is over! goto :over :dist echo Deploying...... ::remove subitems of dist rd /S /Q dist ::copy lib xcopy /y lib\less\img dist\lib\less\img\ ::copy html files xcopy /y src\*.html dist\app\ ::compile less to css cmd /C lessc --include-path=lib/less --clean-css="advanced" --relative-urls src/less/main.less dist/app/style/main.css echo Deploying is over! :over
然后在CMD中输入 build bin 、 build debug 或 build dist 即可构建工程了！
九、与Grunt结合
我们沿用第八节的工程目录结构来演示。
首先我们要将npm的package.json添加到工程中，然后安装grunt及其插件（grunt-contrib-less,less-plugin-clean-css,grunt-contrib-clean,grunt-contrib-copy），现在我们的工程结构应该是这样的。
sample-grunt
|-- package.json
|-- Gruntfile.js
|-- node_modules
|-- lib 第三方依赖库
| |-- less
| |-- base.less
| |-- img
| |-- nav.png
|-- src 源码
| |-- less
| | |-- main.less
| |-- index.html
|-- bin 编译后的文件
| |-- style
| |-- main.css
| |-- main.css.map
| |-- index.html
|-- dist 发布文件
|-- lib
| |-- less
| |-- img
| |-- nav.png
|-- app
|-- style
| |--main.css
|-- index.html
其中用于将Less编译为CSS的插件为grunt-contrib-less， 下面我们对应第八章的内容来介绍该插件的选项。
sourcemap相关：
{Boolean} sourceMap，对应lessc中属性值为true/false的--source-map选项；
{String} sourceMapFilename，对应lessc中属性值为String的--source-map选项；
{String} sourceMapRootPath，对应lessc的--source-map-rootpath选项；
{String} sourceMapURL，对应lessc的--source-map-url选项；
{Boolean} outputSourceFiles，，对应lessc的--source-map-map-inline选项；
@import指令相关：
{Array|String} paths，对应lessc的--include-path选项；
{Boolean} relativeUrls，对应lessc的--relative-urls选项；
插件相关：
{Array} plugins，数组元素为插件实例。
Gruntfile.js内容如下：