Sass - Comments

Sass - Comments

Sass supports two types of comments, similar to many programming languages, but with specific behavior regarding the compiled CSS output.

1. Multiline Comments (/* ... */) - Loud Comments

These are standard CSS comments. By default, Sass preserves these comments in the compiled CSS output when using the expanded output style.

SCSS Example:

/*
 * This is a standard CSS comment.
 * It will appear in the compiled CSS file (in expanded mode).
 */
body {
  color: black;
}

.widget {
  /* A single-line CSS comment, also preserved */
  border: 1px solid #ccc;
}

Compiled CSS (expanded style):

/*
 * This is a standard CSS comment.
 * It will appear in the compiled CSS file (in expanded mode).
 */
body {
  color: black;
}

.widget {
  /* A single-line CSS comment, also preserved */
  border: 1px solid #ccc;
}

Important: When using the compressed output style for production, these comments are typically removed to minimize file size.

Preserving Comments in Compressed Mode: If you need a specific /* ... */ comment (like a license header) to remain even in compressed output, you can start it with /*! (an exclamation mark after the opening /*).

/*!
 * Important License Information
 * This comment will be preserved in compressed output.
 */

2. Single-line Comments (// ...) - Silent Comments

These comments start with // and continue to the end of the line. Sass removes these comments entirely during compilation. They never appear in the final CSS output, regardless of the output style (expanded or compressed).

They are useful for adding notes, explanations, or temporarily disabling code within your Sass files that you don’t want exposed in the browser.

SCSS Example:

$primary-color: blue; // Define the main brand color

// TODO: Refactor this section later
a {
  color: $primary-color;
  // text-decoration: none; // Temporarily commented out
}

Compiled CSS (any style):

a {
  color: blue;
}

Recommendation

• Use single-line comments (//) for most of your commenting needs within Sass files (explaining code, leaving notes, TODOs). They keep your development environment informative without bloating the final CSS.
• Use multiline comments (/* ... */) only when you specifically need the comment to appear in the expanded CSS output (e.g., for section dividers during development) or if you need a comment preserved in compressed output using /*! ... */ (e.g., license information).

Interpolation in Comments

You can use Sass interpolation #{...} inside multiline comments (/* ... */) to include the value of variables or expressions. This is generally only useful for debugging or documentation generation within the expanded CSS output.

$version: '1.2.0';

/*!
 * My Library v#{$version}
 */