SASS compile with comments

Question

I am compiling a SCSS file and it seems to remove my comments. What command can I use to keep all the comments?

>SASS input.scss output.css

I see two types of comments in my SCSS.

// Comment

and

/* Comment */

What is the difference?

Answer 1

As @Roy said above, multi-line comments (/* */) are kept in resulted css, but it depends on format you are using to pre-process your SASS.

If you are using compact mode, or any other 'CSS minifier', you should better use

/*! important comment */

These comments are kept in the compact(minified) versions of your CSS as well.

Example:

html {
     /*! important comment */
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

Result (compact, minified version):

html{/*! important comment */-webkit-box-sizing:border-box;box-sizing:border-box}

Answer 2

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.