How to Enable SASS Line Numbers in CSS Output

How do I enable SASS line numbers in CSS output?

There's an option called :line_comments if you set this to true, Sass will place line numbers in your compiled output.

How to set this option depends on how you're using Sass. If it's in a Rails, Merb, or Rack application you can set Sass::Plugin.options[:line_comments] = true.

If you're using compass, set line_comments = false in your configuration file.

Output the line number from the SCSS file in compiled CSS with gulp-sass

Yes it is possible you need to pass it the right options:

.pipe(sass({
  sourceComments: 'map',
  sourceMap: 'sass',
  outputStyle: 'nested'
}))

Is there anyway to view line numbers on sass fiiles in visual studio?

You have to enable "Line Numbers" for Plain Text files in Options > Text Editor:

The text editor will then display line numbers:

Less: Show line numbers origin file and line numbers in rendered CSS

There is now an option in dotless to output this information as per sass does. the flag is "debug". It will be included in the next release - https://github.com/dotless/dotless/issues/186

Compass Line Number Comments Not Showing Up with Gulp

Be careful with gulp-compass, it is not a gulp plugin (albeit named so) and has been blacklisted by the Gulp community for quite a while. It does not what Gulp plugins are supposed to do (e.g. it's possible to run them without gulp.src and gulp.dest), and other plugins are already doing its work perfectly fine. One of those plugins is gulp-ruby-sass. This setup might work for you:

var sass = require('gulp-ruby-sass');
gulp.task('compass', function() {
   return sass(sassSources, {
     compass: true,
     lineNumbers: true
   }).on('error', gutil.log))
   .pipe(gulp.dest('builds/dev/css'))
});

This uses gulp-ruby-sass which is able to run with the compass extension. You see that I activated lineNumbers here to give you said output.

I see from your Gulpfile that you might have some extension requiring some images, I don't know exactly what that does, but if it's mandatory to your setup, you might better call compass directly (the command line tool) using require('child_process').exec(...)

Is it possible to disable automatic line breaks on Sass's CSS output?

No. That is not possible by SASS itself.

If you like you may have a look to the avaiable styles:

https://sass-lang.com/documentation/js-api#outputstyle

But to be honest: if you use SASS in the intended way with nested styles, mixins, using modules ... the compiled CSS will considerably differ from the SASS code anyway. That even applys to the line numbers. So your problem is a common challenge in the coding process.

As fast debugging is important SASS offers mapping technique:

If activated you are able to see the source code in the browser on the fly. That's really easy and should meet your demands. Maybe you like to have a look on it. Here is a good overview to it: https://thesassway.com/using-source-maps-with-sass-3-3/

Or however if not that way there is another little trick/workarround which may help:

Most SASS projects organize/structures code in partial files (which doesn't make it possible to keep line numbers). That's for different reasons and speeds up working as well. If you do so you just start every file with a CSS comment which notes the file name only. As comments are shown in the browser tools you are able to find the relevant SASS source file without mapping ... and as partial files are almost not as long finding the relevant code (which differs from the CSS) should not longer be the problem.

// ### examples partial filename in a CSS comment

/* base-typography */
...

/* base-forms */
...

/* section-hero */
...

That is not as fast as mapping technique I would really recommend. But finding the code that way is faster than try to keep line numbers exactly the same and missing that way a lot of other advantages of SASS which speeds up my work (like nestings, setting SASS only comments, using mixins and modules ...).

---

Related Topics