Sass Comments

What Comment Styles Does Sass Support?

SCSS supports both CSS's traditional block comments (/* ... */) and an additional line comment style (// ...) borrowed from languages like JavaScript. The two behave very differently once compiled.

// This line comment is removed from the compiled CSS.
/* This block comment is preserved in the compiled CSS. */

.card {
  padding: 1rem; // inline note, also removed
}

Only the block comment survives compilation with the default expanded output style; both are stripped when using compressed output.

Comment Syntax

// single-line comment (Sass-only, never in output)
/* multi-line
   block comment (kept in expanded output) */
/*! important comment (kept even in compressed output) */

• // starts a line comment that Sass strips entirely during compilation.
• /* */ starts a standard block comment, kept in expanded CSS output but removed in compressed output.
• /*! */ marks a comment as important, Dart Sass preserves it even when compressing output (useful for license headers).
• Block comments can also use interpolation (#{}) to include dynamic values in the output.

Sass Comments Cheatsheet

When to reach for each comment style.

Line Comments for Developer Notes

Line comments (//) are ideal for notes meant only for developers reading the source, TODOs, explanations of a tricky value, or reminders about why a workaround exists. They never appear in the compiled CSS, regardless of output style.

// TODO: replace this magic number once design tokens ship
$header-height: 64px;

Block Comments for Shared Documentation

Block comments are useful when you want the note to remain visible in the compiled CSS, for example, documenting a component's usage for teammates who might only ever look at DevTools, or preserving license and copyright information.

/*!
 * Component: Button
 * Usage: .btn, .btn--primary, .btn--secondary
 */
.btn {
  display: inline-block;
}

The /*! */ form ensures this documentation survives even a compressed, minified production build.

Interpolation Inside Comments

Sass evaluates interpolation (#{}) inside block comments, which is a handy way to print a computed value, like a version number or build date, directly into the compiled CSS for debugging.

$version: "2.4.0";

/* Compiled with design system v#{$version} */
.button {
  padding: 0.75rem 1.25rem;
}

Common Mistakes

• Using a line comment for information that needs to survive into production CSS, like licensing notes.
• Assuming standard block comments always survive minification; only the /*! */ form is guaranteed to.
• Leaving large blocks of commented-out dead code in a stylesheet instead of deleting it (version control already keeps the history).
• Forgetting that interpolation inside comments still needs valid Sass expressions, not arbitrary text.

Key Takeaways

• Sass supports line comments (//, dev-only) and block comments (/* */, potentially kept in output).
• Use /*! */ for content that must survive even a compressed production build, like license headers.
• Interpolation (#{}) works inside block comments, letting you print computed values into compiled CSS.
• Choose the comment style based on whether the note is for source code readers or for the compiled output.