How to Ignore Multiline Comments in SASS

How to ignore multiline comments in sass?

Yay! I've learned monkey patching SASS while answering this question:

Sass mixin recursion; @include loop

And now i can help you too!

1) Install Compass

For this solution to work, you'll need Compass. Install it with:

gem install compass

2) Configure Compass

Create a compass.rb file in your project's root and define directories where you keep your SASS and CSS code, e. g.:

css_dir = "stylesheets"
sass_dir = "sass"

3) Create a monkey patch

Create a file called remove-all-comments-monkey-patch.rb in your project's root:

class Sass::Tree::Visitors::Perform < Sass::Tree::Visitors::Base

  # Removes all comments completely
  def visit_comment(node)
    return []
  end

end

4) Require the monkey patch from the config.rb

In the config.rb, add:

# Removing all comments by applying a monkey patch to SASS compiler
require "./remove-all-comments-monkey-patch"

5) Compile your project with Compass

Use compass compile to compile SASS into CSS. You can also use compass watch to make the Compass command line tool constantly monitor your code for changes and recompile parts that you modify.

Considerations

This will not remove comments with line numbers generated by SASS. To disable them comment out the line_comments = true line in config.rb or set it to false.

To re-enable multiline comments, just comment out the line that requires the monkey patch and do compass clean.

Don't use it! Use single-line comments with Ctrl+/.

Though this solution is portable and will work for everybody without hacking SASS code manually, you should really consider using an IDE that allows commenting out whole paragraphs with single-line comments using a single keystroke. For me it's Ctrl+/.

Here, i've filmed a short video for you to show that using line comments is actually quicker and more effective than using multiline comments: http://www.youtube.com/watch?feature=player_detailpage&v=DTyMAPZrwyc

Line comments also let you comment out comments without breaking the code.

Consider you have the following code:

foo

/* Bla bla */
bar

baz

And you need to comment it all out. If you wrap it all with /* */...

/*foo

/* Bla bla */
bar

baz*/

...then you broke the code! Now you have a comment that starts with /*foo and ends with bla */, and also a syntax error at baz*/.

Instead, just select the whole code and hit Ctrl+/ (provided that use some IDE or programmer's notepad), it will all be commented out immediately:

//foo
//
///* Bla bla */
//bar
//
//baz

And of course it can later be uncommented with the same hotkey.

How to ignore comments in sass partial files?

If you use inline comments, they won't show up in your compiled file.

For example:

// Colors

Which output styles remove multiline line comments?

:compressed is the only output style which will remove multi-line (/* ... */) comments from the final rendered CSS.

Additionally, :compact will turn a multi-line comment into a single line in the final CSS. With :nested and :expanded, all multi-line comments and their line breaks are rendered in the final CSS.

For example, this SCSS:

// SL Comment

/* ML Comment1
   Whoop. */

//! SL w/ bang

/*! ML Comment2
    Whoop. */

will become the following CSS for each different output style:

Nested:

/* ML Comment1
   Whoop. */
/* ML Comment2  
    Whoop. */

Expanded:

/* ML Comment1
   Whoop. */
/* ML Comment2
    Whoop. */

Compact:

/* ML Comment1 Whoop. */
/* ML Comment2 
    Whoop. */

Compressed:

/* ML Comment2
    Whoop. */

Beginning a comment with ! only affects multi-line comments in :compressed mode, where they will be preserved when they would otherwise be removed from the final CSS.

Disable line comments compass not working

My config.rb file was being ignored. Fixed it by going into the folder with commandline and typing compass watch from within the folder.

Still puzzles my because I have other projects in my WAMP folder and I just use compass watch [project] for those and the config.rb file for those does not get ignored.

Having scss-lint ignore a particular line

Yep, see the docs on disabling linters via source

// scss-lint:disable ImportantRule
.example {
  display: block !important;
}
// scss-lint:enable ImportantRule

Have sass-lint ignore a certain line?

Disabling through comments

Update per December 2016 according to the docs this will now be possible using this syntax:

Disable more than 1 rule for entire file

// sass-lint:disable border-zero, quotes

p {
  border: none; // No lint reported
  content: "hello"; // No lint reported
}

Disable a rule for a single line

p {
  border: none; // sass-lint:disable-line border-zero
}

Disable all lints within a block (and all contained blocks)

p {
  // sass-lint:disable-block border-zero
  border: none; // No result reported
}

^{New info courtesy of commenter @IanRoutledge.}

However, before, if you wanted to disable certain rules, but only for specific code blocks and/or pieces of the code. As far as I can tell from the underlying source code it would not be possible with sass-lint. I've tried a few other searches as well, and skimmed the code base in general, but found no hint that the feature you're looking for exists.

For comparison, this query for the scss-lint source code clearly shows it is implemented there, in a fashion that doesn't seem to have an analogous solution in the lib you are using.

Disabling through yml configs

You can disable rules in general though. You need to have a .sass-lint.yml file to disable warnings.

Suppose you have this gulpfile.js:

'use strict';

var gulp = require('gulp'),
    sassLint = require('gulp-sass-lint');

gulp.task('default', [], function() {
  gulp.src('sass/*.scss')
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
});

And this package.json:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.1.1",
    "gulp-sass-lint": "^1.1.1"
  }
}

Running on this styles.scss file:

div { dsply: block; }

You get this output:

[23:53:33] Using gulpfile D:\experiments\myfolder\gulpfile.js
[23:53:33] Starting 'default'...
[23:53:33] Finished 'default' after 8.84 ms

sass\styles.scss
  1:7   warning  Property `dsply` appears to be spelled incorrectly  no-misspelled-properties
  1:21  warning  Files must end with a new line                      final-newline

??? 2 problems (0 errors, 2 warnings)

Now if you add a .sass-lint.yml file next to the gulpfile, with this content:

rules:
  no-misspelled-properties: 0

You'll instead see:

[23:54:56] Using gulpfile D:\experiments\myfolder\gulpfile.js
[23:54:56] Starting 'default'...
[23:54:56] Finished 'default' after 9.32 ms

sass\styles.scss
  1:21  warning  Files must end with a new line  final-newline

??? 1 problem (0 errors, 1 warning)

One of the warnings is now ignored.

The sass-lint readme.md links to the apparent default config which has some more examples.

SASS compile with comments

The difference between the two type of comments is pretty easy:

// Some comment for a single line

and

/* This is 
a multiline comment
for large descriptions */

According to the officials docs of SASS, you can only use the multiline comment option to preserve it into a compiled output file.

Like Sass, SCSS supports both comments that are preserved in the CSS output and comments that aren't. However, SCSS's comments are significantly more flexible. It supports standard multiline CSS comments with /* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.

SCSS also uses // for comments that are thrown away, like Sass. Unlike Sass, though, // comments in SCSS may appear anywhere and last only until the end of the line.

So the following CSS:

/* This comment
should be kept
and not be thrown away */
.class {
    margin: 0 auto;
}

// This comment will be thrown away
.extra-class {
    color: blue;
}

will be compiled into:

/* This comment
should be kept
and not be thrown away */
.class {
    margin: 0 auto;
}

.extra-class {
    color: blue;
}

To fix your compilation problems, you need to convert the // to /* */ comments.

stylelint-scss - Is there a way to disable double-slash-comments?

The no-invalid-double-slash-comments rule disallows a particular type on double slash comment in CSS. Quoting from the docs:

If you are using a preprocessor that allows // single-line comments (e.g. Sass, Less, Stylus), this rule will not complain about those. They are compiled into standard CSS comments by your preprocessor, so stylelint will consider them valid.

I don't believe there's an existing rule to disallow SCSS double-slash comments. However, you can write a simple plugin to do this. I suggest you use the comment-no-loud rule from the stylelint-scss plugin pack as a blueprint.

---

Related Topics