Sass supports two comment styles. Silent comments start with // and never appear in CSS. Loud comments use /* */ and (usually) compile to CSS comments.
Start a loud comment with /*! to keep it even in compressed mode — useful for licenses. Loud comments can use interpolation (#{…}). Document libraries with triple-slash /// SassDoc comments.
Official terms.
Sass docs call // silent and /* */ loud. Silent comments may as well not exist to the compiler.
Compressed mode.
Regular loud comments are stripped when you compile with --style=compressed. /*! comments always ship.
Indented syntax differs.
In .sass, everything indented under // or /* is part of the comment, and closing */ is optional for loud blocks.
Syntax
Syntax
SCSS
// Silent — never in CSS
/* Loud — in CSS (except compressed) */
/* Interpolation: #{1 + 1} */
/*! Keep me even when compressed */
p /* anywhere whitespace is allowed */ .sans {
font: Helvetica, // trailing silent ok
sans-serif;
}
Pattern: author notes with // → ship labels / licenses with /* */ or /*! */ → document APIs with ///.
Each example shows a core comment behavior. Open View Compiled CSS for verified output (expanded unless noted).
Example 1 — Official SCSS Comment Mix
Silent lines disappear; loud and important comments remain in expanded CSS.
SCSS
// This comment won't be included in the CSS.
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = #{1 + 1} */
/*! This comment will be included even in compressed mode. */
p /* Multi-line comments can be written anywhere
* whitespace is allowed. */ .sans {
font: Helvetica, // So can single-line comments.
sans-serif;
}
Compiled CSS
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
font: Helvetica, sans-serif;
}
How It Works
Silent // notes vanish completely.
Loud comments stay in expanded CSS.
#{1 + 1} evaluates to 2 inside the comment.
Inline comments act as whitespace — p .sans compiles cleanly.
Example 2 — Everyday Silent & Loud Notes
Use silent comments for authors; loud comments when the CSS file should keep a label.
Loud /* */: ships in expanded CSS; stripped when compressed.
/*!: always kept — licenses and version banners.
///: SassDoc docs for public mixins and functions.
One line: use // for you, /* */ for CSS readers, and /*! when the note must survive minify.
Compile
Compile Notes
Conceptual flow for comments:
flow.txt
1. Parse // (silent) and /* */ (loud / important)
2. Evaluate #{…} inside loud comments
3. Drop all silent and /// documentation comments
4. Emit loud comments into CSS (unless compressed)
5. Always keep /*! comments in the final CSS
Frequently Asked Questions
Silent comments start with // and go to the end of the line. They are never emitted as CSS. In the indented .sass syntax, everything indented under // is also commented out.
Loud comments use /* */. When written where a statement is allowed, they compile to CSS comments. By default they are removed in compressed output.
A multi-line comment that begins with /*! is kept even in compressed mode. Use it for licenses, copyright notices, and other text that must ship in the CSS file.
Yes for loud /* */ comments. Expressions inside #{ } are evaluated before the comment is compiled. Silent // comments are not emitted, so interpolation there does not appear in output.
Documentation comments use three slashes (///) above mixins, functions, variables, or placeholders. SassDoc reads them as Markdown and can generate library docs.
The idea is the same, but indented syntax is indentation-based: blocks under // or /* are included in the comment, and */ is optional for loud comments. Inline expression comments match SCSS.
