Skip to content
Tutorial Reference

Sass Comments

How Sass handles multiline /* */ and single-line // comments, including how they differ in CSS output and support for interpolation in multiline comments.

Comments are non-executable statements, which are placed in source code. Comments make source code easier to understand. SASS supports two types of comments.

  • Multiline comments: These are written using /* and */. Multiline comments are preserved in CSS output.
  • Single line comments: These are written using // followed by comments. Single line comments are not preserved in CSS output.

Example

This is the style.scss file:

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

and this is the generated style.css file:

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

a { color: blue; }

Interpolation in Multiline Comments

Interpolation within the multiline comments are resolved in the resulting CSS. So, you can specify variables or property names within the curly braces.

For example, the style.scss:

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

will be converted to style.css:

/* Framework version for the generated CSS is 7.8. */

Summary

Comment type Syntax Appears in CSS output Supports interpolation
Multiline /* ... */ Yes Yes
Single-line // ... No No

Quick reference

  • Use // for private notes meant only for developers reading the Sass source.
  • Use /* */ for comments that should survive into the compiled CSS, such as file headers, license notices, or banner annotations.
  • Use #{...} inside /* */ when you want the compiled comment to reflect a variable value, such as a version number or build timestamp.
  • In compressed output mode, Sass strips all comments except those that start with /*!. The exclamation mark tells Sass the comment is important and must be kept even in production builds:
$version: "7.8";
/*! Framework version #{$version} - do not remove */
/*! Framework version 7.8 - do not remove */
Navigation