LESS 源映射
LESS（Leaner CSS）是一款动态样式语言，可以帮助前端开发人员编写更加简洁、模块化、易于维护的 CSS。除此之外，LESS 还有一个非常重要的优势，就是支持源映射（Source Maps），可以帮助我们更容易地调试和定位代码问题。
源映射是一种能够将编译后的代码映射回源代码的技术。在开发过程中，我们通常会使用 LESS 进行样式编写，然后通过编译器将 LESS 文件编译为 CSS 文件，再将编译后的 CSS 文件应用到网页中。但是，如果我们在运行网页时出现了样式问题，想要定位到问题所在的 LESS 文件，这时就可以使用源映射技术。
使用 LESS 源映射
LESS 源映射需要在编译时开启，可以通过以下几步来实现：
安装支持源映射的 LESS 编译器，例如 lessc、grunt-contrib-less、gulp-less 等。
在编译命令中开启源映射选项，例如：
lessc style.less style.css --source-map
grunt-contrib-less 插件使用：
less: { development: { options: { sourceMap: true }, files: { 'style.css': 'style.less' } } }
gulp-less 插件使用：
gulp.task('less', function () { return gulp.src('style.less') .pipe(less({ sourceMap: true })) .pipe(gulp.dest('dist')); });
开启源映射后，编译后的 CSS 文件中将包含一些注释和源映射文件的链接。例如：
/*# sourceMappingURL=style.css.map */
这个链接指向了一个 JSON 文件，其内容包含了编译前和编译后的源代码的映射关系。
调试 LESS 源代码
在浏览器中启用源映射功能，可以让我们在开发过程中更轻松地调试 LESS 源代码。
在 Chrome 浏览器中，我们可以通过打开开发者工具（F12）选择 Sources 选项卡，然后找到我们想要调试的样式文件。右侧的面板中，我们可以看到两个选项：Compiled 和 Source。如果我们选择 Source 选项，就可以看到编译前的 LESS 源代码。
在样式文件中对某个元素进行样式修改，然后刷新浏览器，就可以看到修改后的效果了。
示例代码
HTML 代码：
LESS 代码：
.box { color: red; &:hover { color: blue; } }
CSS 代码：
.box { color: red; } .box:hover { color: blue; } /*# sourceMappingURL=style.css.map */
JSON 映射文件（style.css.map）：
{ "version": 3, "sources": [ "style.less" ], "names": [], "mappings": "AACA;EACI,YAAY;EAEZ,MAAM;AACpB", "file": "style.css", "sourcesContent": [ ".box {\n color: red;\n &:hover {\n color: blue;\n }\n}\n" ] }
在 Chrome 浏览器中，我们选择 Sources 选项卡，然后找到 style.less 文件，在右侧面板中选择 Source 选项，就可以看到编译前的 LESS 源代码。修改其中的样式定义，刷新浏览器，就可以看到修改后的效果了。
总结
LESS 源映射是一项非常实用的技术，可以帮助我们更容易地调试和定位样式问题。通过学习和使用 LESS 源映射技术，我们可以提高前端开发效率，减少开发调试的时间和成本。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653691ce7d4982a6ebeaa07a