Less/Sass debugging in Chrome Dev Tools/Firebug

css sass less source-maps
Dave Stibrany picture Dave Stibrany · Mar 26, 2012 · Viewed 21.3k times · Source

How do you guys do maintenance on CSS built with Less/Sass?

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?

Answer

tsi picture tsi · Oct 7, 2012

Chrome Developer Tools now supports Sass debugging out-of-the-box.

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:

  1. Make sure you have Sass 3.3.x
  2. Compile your Sass with the --sourcemap flag.
  3. In Chrome/ium DevTools open settings and click general.
  4. Turn on "Enable CSS source maps".

More info is available on the Chrome dev tools blog: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

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".

Related questions

Does LESS have an "extend" feature?

SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins). Does LESS have this feature as well?

Read More
Is there a SASS.js? Something like LESS.js?

I have used LESS.js before. It's easy to use, something like <link rel="stylesheet/less" href="main.less" type="text/css"> <script src="less.js" type="text/javascript"></script> I saw SASS.js. …

Read More
CSS to SASS (or LESS) conversion

Can anyone recommend some CSS to less, or CSS to sass conversion tools? I have found a few .e.g. http://css2less.cc/ and http://css2sass.herokuapp.com/ but any insight into their reliability (or recommendations of other …

Read More