Sass Comments

What You’ll Learn

Sass comments come in silent (//) and loud (/* */) forms. This page covers both syntaxes, /*! important comments, interpolation, SassDoc /// docs, and five compiled examples.

What Are Sass Comments?

Official docs: both SCSS and the indented syntax support two comment styles—comments defined with /* */ that are (usually) compiled to CSS, and comments defined with // that are not.

• Silent (//) — never appear in the CSS output.
• Loud (/* */) — usually become CSS comments (removed in compressed mode).
• Important (/*! */) — loud comments that survive compression.
• Loud comments may contain interpolation that Sass evaluates first.

📝 Syntax (SCSS)

In SCSS, comments work like JavaScript: // runs to the end of the line; /* … */ can span multiple lines. Both kinds can appear almost anywhere whitespace is allowed.

// 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;
}

⚖️ Silent vs Loud Comments

⚡ Important Comments (/*!)

By default, multi-line comments are stripped from compressed CSS. If a comment begins with /*!, Sass keeps it in every output style—handy for copyright and license headers that must remain after minification.

📄 Comments in the Indented Syntax

Official docs: in .sass (indented) files, comments are indentation-based. Silent // comments never emit CSS, and everything indented beneath the opening // is also commented out. Loud /* comments work the same way with indentation; the closing */ is optional. Both still support interpolation and /*!. Inside expressions, comment syntax matches SCSS.

📚 Documentation Comments (SassDoc)

When you ship a style library, document mixins, functions, variables, and placeholders with silent /// comments directly above the item. Tools such as SassDoc parse the text as Markdown and support annotations like @param and @return.

These are still silent comments—they never appear in CSS. They exist for humans and documentation generators.

Examples Gallery

Each example shows a core comment behavior. Open View Compiled CSS for verified output (expanded style unless noted).

// 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;
}

/* 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;
}

$brand: #036;

// Section: buttons
.button {
  /* Primary action */
  background: $brand;
  color: #fff; // keep text readable
}

/*! Copyright CodeToFun - keep in production CSS */
.footer {
  font-size: 0.875rem;
}

.button {
  /* Primary action */
  background: #036;
  color: #fff;
}

/*! Copyright CodeToFun - keep in production CSS */
.footer {
  font-size: 0.875rem;
}

$version: "1.2.0";
$year: 2026;

/*! Theme kit v#{$version} - #{$year} */
.card {
  // silent note: padding tokens
  padding: 1rem;
  /* Loud: border uses brand */
  border: 1px solid #c6538c;
}

/*! Theme kit v1.2.0 - 2026 */
.card {
  padding: 1rem;
  /* Loud: border uses brand */
  border: 1px solid #c6538c;
}

.nav {
  display: flex;
  gap: 1rem; /* inline loud */
  // gap uses rem for accessibility
  align-items: center;
}

/*! License: keep me */

.nav{display:flex;gap:1rem;align-items:center}/*! License: keep me */

/// Computes an exponent for design scales.
/// Prefer math.pow when available; this is a teaching stub.
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.scale {
  font-size: pow(2, 3) * 1px;
}

.scale {
  font-size: 8px;
}

🚀 Real-World Use Cases

• Author notes — explain non-obvious selectors with //.
• Section banners — loud /* === Buttons === */ in readable CSS builds.
• Licenses — /*! so minifiers keep the legal header.
• Build metadata — interpolate version/date into an important banner.
• Library docs — /// + SassDoc for public mixins and functions.

⚠️ Common Pitfalls

• Expecting // in CSS — silent comments never compile out.
• Assuming loud comments survive minify — use /*! for that.
• Putting secrets in loud comments — they may ship to every visitor.
• Forgetting indented blocks — in .sass, nested lines under // are also comments.
• Mixing SassDoc with loud comments — use /// above APIs, not /* */.

💡 Best Practices