问题描述
你们如何对使用Less / Sass构建的CSS进行维护？
How do you guys do maintenance on CSS built with Less/Sass?
我喜欢Dev Tools / Firebug的一件事是看到行css样式的编号。有没有好的方法来使用CSS预处理器，而不是手动搜索.less / .scss文件来找到我想要修改的代码？
One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?
推荐答案
Chrome开发人员工具现在支持Sass调试即开即用。
Chrome Developer Tools now supports Sass debugging out-of-the-box.
更新为包含源地图： strong>
以前的版本在css中使用内联注释来提供对源代码的引用（参见下面的how-to）。 sass（3.3+）和chrome（31+）的最新版本使用源映射：
Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:
- 确保您拥有Sass 3.3.x
- 使用 - sourcemap 标志编译您的Sass。
- 打开设置并点击一般。
- 打开启用CSS源地图。
- Make sure you have Sass 3.3.x
- Compile your Sass with the --sourcemap flag.
- In Chrome/ium DevTools open settings and click general.
- Turn on "Enable CSS source maps".
信息可以在Chrome开发工具博客中找到：
More info is available on the Chrome dev tools blog:https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
旧版本：
1首先，你应该用 - debug-info 编译你的Sass。
2.在Chrome / ium中转到about：flags
3.启用开发人员工具实验
4.在您的检查器（F12）中，打开设置，然后转到实验选项卡
并选中支持SASS 。
Older versions:
1. First, you should compile your Sass with --debug-info turned on.
2. In Chrome/ium go to about:flags
3. Enable Developer Tools experiments
4. In your inspector (F12), open "Settings", then go to the "Experiments" tab and check "Support for SASS".
这篇关于Less / Sass调试在Chrome开发工具/ Firebug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！