Search code examples
csssasscodekit

How to inspect precompiled minified SASS code

I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.

enter image description here

I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.

I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.

Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?

I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.

These are the settings I have Codekit set to:

enter image description here

Solution

  • Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.

    In your compilation settings, check the Create a source map box for SASS.

    For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.