Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to ignore multiline comments in sass?

Is there a way to make sass ignore multiline comments when generating the css file:

// these comments are ignored

These are not (only ignored in compressed mode):

/*
 * multiline comments
 *
 */

I found this ticket on Github where the author says:

If you really want, you can monkeypatch Sass to silence /* */ comments as well.

But I don't know what he means by monkeypatch sass, so how can I do this ?

like image 706
Pierre Avatar asked Mar 30 '13 15:03

Pierre


1 Answers

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.

like image 105
Andrey Mikhaylov - lolmaus Avatar answered Sep 24 '22 19:09

Andrey Mikhaylov - lolmaus