60

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?

Dave Stibrany
  • 2,369
  • 3
  • 21
  • 21
  • Here's a complete tutorial to help you set up your dev ennvironment to allow debugging Less and Sass in webkit inspector after getting it automatically compiled to css. It even explains how to save CSS changes directly back to your css files from within Chrome if you like. http://blog.q42.nl/post/35203391115/debug-sass-and-less-in-webkit-inspector-and-save-css-cha – Martin Kool Nov 07 '12 at 19:38
  • 9
    Yet another important question closed as "not constructive". I wish these people don't just close questions they don't understand. I am using LESS and totally agree with OP and (although there are workarounds) I wish LESS has an option to keep the line numbers in the generated CSS. – Aximili May 12 '13 at 03:06
  • 8
    why is this "not constructive"?? i searched for this on google and this was my exact question, glad i found it. also has great answers – esther h Jul 11 '13 at 07:14
  • I think this question might have avoided the lock if it has missed the last sentence. The last sentence is one that can solicit debate etc. I'm not justifying or agreeing with the lock (afterall, I came to this question because I care about the answer) ... just pointing out what probably tipped it over the line. – GreenAsJade Dec 30 '13 at 08:34
  • @GreenAsJade I agree that the last sentence could solicit debate so I'm removing it. Hopefully this question can be reopened. – Dave Stibrany Mar 11 '14 at 03:03
  • This question now has a better answer due to source maps. @DaveStibrany While my answer was fine at the time I gave it, please change the accepted answer to that of tsi :) – sg3s Jul 07 '14 at 07:57

5 Answers5

33

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

tsi
  • 1,244
  • 12
  • 10
  • 2
    And if you're using Compass, add `sass_options = {:debug_info => true}` to your config.rb file. – steveax Nov 23 '12 at 19:07
  • 1
    I believe the specific setting has been renamed from `Support for SASS` to `Enable source maps`. – Omar Jan 06 '13 at 09:48
  • In my config.rb file ```sass_options = {:debug_info => false} line_comments = true ``` still works and css files not so messy. – FDisk Mar 12 '13 at 21:17
  • 1
    Any ideas whether this is only working for .scss syntax and not .sass? – mcabrams Jun 27 '13 at 20:18
  • 1
    In case anyone else ends up here after struggling to make Chrome work with Sass, you need to run a different command to generate source maps via command line: sass --watch --sourcemap sass/styles.scss:styles.css instead of --debug-info. – Jason Lydon Oct 25 '13 at 16:37
  • Updated to reflect recent changes, as noted by @JasonLydon. – tsi Dec 15 '13 at 19:03
  • LESS now supports source maps as well. – seven-phases-max Dec 15 '13 at 23:07
  • To be exact, the usage guide of LESS source maps can be found here: http://lesscss.org/usage/#command-line-usage-source-map-output-filename – sg3s Jul 07 '14 at 07:59
28

If you're making a choice as to which you should be using, this article on css-tricks might be of interest to you.

I have come to experience that using LESS or SASS has more advantages than disadvantages. Though this is certainly a disadvantage I can only suggest you structure your files well so any styles you seek are easily found using other references, here are a few things you can do:

  • Document areas of your stylesheet; ie /* General */, /* Header */ and /* Footer */
  • Use logical and sensible names for classes you can recognize quickly (and don't number them like error1-error10 or something)
  • Learn to dissect the class/element/id selectors and think about how/where you would have written them.
  • Use CTRL+F, often the precise attribute or one near it is fairly easily found this way

SASS

There is now a way to debug SASS in firefox using an extension that reads and displays the sass files in the firebug inspector. To use, install the extension and enable the respective debug flags.

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Edit: as of 2014-07-06, this plugin is no longer available for download. FireSass has been discontinued.

Chrome/Webkit versions have been popping up around the net and theres a beta feature in chrome to add support for SASS debugging. It's based on the same debugging information used in the firefox version. Haven't been able to judge any of them properly as of yet, nor found something which is publicly accepted as being the plugin for the job as of this writing.

LESS / STYLUS

As this tweet @jaketrent points to explains, there is progress on the debugging side in chrome, but nothing baked in yet and given the state of the LESS github it might still take a while... Both solutions are based on the beta feature for SASS debugging support in chrome, basically adding the same debug information as SASS does.

dada
  • 33
  • 3
sg3s
  • 9,411
  • 3
  • 36
  • 52
  • Cool! Thanks guys. Yea seems like good code organization + naming conventions will go a long way. – Dave Stibrany Mar 26 '12 at 01:16
  • 2
    Note: recent versions of chrome dev tools have experimental SASS support. – Nico Burns Jul 30 '12 at 17:04
  • Here is another [extension for chrome](https://chrome.google.com/webstore/detail/lkofmbmllpgfbnonmnenkiakimpgoamn). Though on [GitHub](https://github.com/tinganho/SASS-Inspector) the author says that it has still a few bugs... – borisdiakur Aug 29 '12 at 08:49
  • 2
    The problem with the extension above is that it has to create a separate Sass pane instead of simply extending the existing CSS one. We (@mobify) have an alternate solution for Webkit browsers that we just released to the world, check it out here: http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/. – shawnjan Aug 30 '12 at 00:16
  • 7
    Breaking: [Less will now expose Sass-style debug info in Chrome](https://twitter.com/fgnass/status/268744635592105984) – jaketrent Nov 14 '12 at 16:40
  • @jaketrent - the most useful comment in the whole page. Ta. – Robin Winslow Nov 26 '12 at 13:56
  • [Getting started with CSS sourcemaps and in-browser Sass editing](https://medium.com/what-i-learned-building/b4daab987fb0) ... there's another link on debugging Sass in Chrome. – PAEz Jul 14 '13 at 12:14
1

I switched from less to sass, because of firesass. With this you get the original sass line in firebug.

install firesass if you use sass

yvess
  • 1,992
  • 19
  • 17
1

I rarely have issues with maintenance/debugging in LESS -- we always compile on the server end and reference only the CSS file in the HTML page. This makes it so there's always a one-to-one correspondence with the webpage and a file on disc.

And then when I have to edit the LESS file, I find that LESS, since its pretty much CSS+extra markup, it's quite easy to backtrace anything I'm confused about to the originating statement in CSS. If it's a mixin, it's pretty obvious (since I usually use mixins to prevent having to do all the vendor prefix stuff repeatedly), and then it's just a logical hierarchy since we use the class nesting feature, so finding:

div#awesome aside ul

is as easy as finding:

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

(although we try to not go more than 3 layers deep)

I have no real experience with SASS but I didn't like how far removed from CSS it was when I first looked at it a few years back (and haven't been back since...)

tkone
  • 22,092
  • 5
  • 54
  • 78
  • SASS is the same, it's scary how much they look alike these days; LESS steals from SASS and I think visa versa, it's funny to meet the copyright mark for SASS somewhere in the bottom of LESS where color functions reside. – sg3s Mar 26 '12 at 00:54
  • @sg3s Ah, I only saw it when it had it's (Indented Syntax)[http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html] which is far enough removed for me to not be worth it. Never see the SASS copyright mark though. (and a quick ctrl-f showed nothing.) I always thought the new CSS-mode for SASS was a function of LESS' popularity. Either way, they're very useful! – tkone Mar 26 '12 at 00:58
1

Some tips:

  • Include both the .sass and the .css files in version control. This way everyone has the most current changes.
  • If you organize your stylesheets into logical areas, maintenance is a breeze.
  • Also: try to use fewer than three main colors, and then use SASS color functions to modify them and store results in variables that you can reuse throughout your design/theme.

Ex: $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

That way, you only have to maintain one color. And the rest will be recalculated.

Until recently, there were no in-browser SASS debugging tools.

There is now a Firefox plugin called FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

In your sass --watch command, add a -g for --debug-info so that it will output the hooks needed for the plugin to run.

Benxamin
  • 4,774
  • 3
  • 31
  • 30