Sass and SCSS Comments: Types and Uses

What are Sass and SCSS Comments?

Sass and SCSS support comments similar to those in CSS and JavaScript. They let you add notes to explain your code, making it easier to understand, document design choices, clarify complex sections, and assist in debugging without changing the compiled output.

In this tutorial you will learn about indented Sass and SCSS comment types, their practical uses, and see comprehensive examples for easy implementation.

Types of Comments in Sass & SCSS

Sass and SCSS support three types of comments, though both differ slightly due to syntax differences.

1. Inline Comments
2. Block Comments
3. Important comments

We will look into each of these Sass and SCSS comment types and their compiled output with the help of examples.

SCSS Type Comments

• Use braces and semicolons, similar to CSS
• Supports inline and block-level commenting styles
• Comments integrate seamlessly with CSS syntax

Inline Comment in SCSS

• Starts with //
• Completely removed from compiled CSS
• Useful for notes, reminders, or disabling code

// This line won't appear in CSS
$color: #333;

body {
	color: $color; // Inline note
}

body {
  color: #333;
}

Block Comment in SCSS

• Starts using /*
• Closing is mandatory using */ for block comments in SCSS
• Always included in compiled CSS
• Good for documentation and longer notes

/* Theme background color for light mode */

$bg: #fafafa; /* Used as primary background  
across multiple layout sections */

body {
	background: $bg;
}

/* Theme background color for light mode */
/* Used as primary background  
across multiple layout sections */
body {
  background: #fafafa;
}

body{background:#fafafa}

Important Comment in SCSS

• Starts with /*! ... */
• Always preserved in compiled CSS, even in compressed mode
• Used for licenses or critical notes

/*! License: MIT | Author: John Doe */
$primary: #007bff;

button {
	background: $primary;
}

/*! License: MIT | Author: John Doe */
button {
	background: #007bff;
}

/*! License: MIT | Author: John Doe */button{background:#007bff}

Stray Strings in SCSS

Any text outside variables, properties, or comments is considered a stray string in SCSS. This is not a comment type and will trigger a compiler error.

$color: #333;

"Warning string outside code"

body {
  color: $color;
}

Please resolve error to view compiled CSS.

@error:1 expected selector.
	   ╷
	 1 │ $color: #333;
	   │              ^
	   ╵
	   - 1:14  root stylesheet

Try it out in the Live SCSS Transpiler to see the results instantly.

Sass Type Comments

• Uses indentation instead of braces and semicolons
• Block comments can rely on indentation without closing tags
• Cleaner syntax but requires consistent indentation

Inline Comment in Sass

• Starts with //
• Excluded from compiled CSS
• Great for quick notes or disabling lines

// This line won't appear in CSS
$color: #333

body
	color: $color // Inline note

body {
	color: #333;
}

Block Comment in Sass

• Begin with /* in indented Sass syntax
• Indentation can close the comment block automatically
• Explicit */ closing is optional
• Closing */ is mandatory while using inline
• Included in compiled CSS by default
• Inline block comments after code are stripped in compiled CSS
• Omitted only in compressed output
• Ideal for detailed notes and documentation

/* Main text color for headings
   Used throughout the site for consistency

$heading-color: #222222  /* Applies to all h1-h6 elements */

h1, h2, h3, h4, h5, h6
	color: $heading-color

/* Main text color for headings
 * Used throughout the site for consistency */
h1, h2, h3, h4, h5, h6 {
	color: #222222;
}

h1,h2,h3,h4,h5,h6{color:#222}

Important Comment in Sass

• Begin with /*! which is mandatory
• End with */ which is optional in block comments
• If used inline, closing is required though inline important comments are uncommon
• Always retained in compiled CSS including compressed output
• Inline important comments in indented Sass are not preserved in compiled CSS
• Best for licenses author details or critical annotations

/*! Project License: MIT | Author: Jane Smith
$primary-color: #ff5733

.card
	background: $primary-color /*! Important: Do not remove this notice */

/*! Project License: MIT | Author: Jane Smith */
.card {
	background: #ff5733;
}

/*! Project License: MIT | Author: Jane Smith */.card{background:#ff5733}

Stray Strings in Sass

Plain text in your Sass file that is not a valid comment or code is treated as a stray string. This is not a comment type and may trigger compiler warnings while being ignored in the output CSS.

$color: #333

This is a stray string warning

body
	color: $color

body {
	color: #333
}

Practical Uses of Sass Comments

Sass comments go beyond simple reminders or notes. When used thoughtfully, they make your stylesheets easier to read, maintain, and share. Here are some practical ways to utilize Sass and SCSS comments effectively.

• Author Notes
• Documentation
• Team Collaboration
• Debugging

Author Notes

Use comments to explain why certain styles exist, note design decisions, or leave reminders for yourself.

// Primary button color chosen to match brand palette
$primary-color: #007bff;

.button-primary {
	background-color: $primary-color; // Ensures consistency across all buttons
}

.button-primary {
	background-color: #007bff;
}

Documentation

Provide details about components, patterns, or variables for easier understanding when revisiting the project.

/* Card component variables
   Used throughout the dashboard layout */
$card-bg: #ffffff;
$card-padding: 20px;

.card {
	background: $card-bg;
	padding: $card-padding;
}

.card {
	background: #ffffff;
	padding: 20px;
}

Team Collaboration

Comments make it easier for other developers to understand your code, aiding handoffs and teamwork.

// Warning: Do not modify $base-font without approval
$base-font: 'Helvetica, Arial, sans-serif';

body {
	font-family: $base-font; // Ensures typography is consistent across modules
}

body {
	font-family: 'Helvetica, Arial, sans-serif';
}

Debugging

Temporarily disable code or add notes for debugging without affecting the output CSS.

// Temporarily disable header styles during testing
// $header-bg: #f5f5f5;
// $header-padding: 15px;

.header {
	// background: $header-bg;
	// padding: $header-padding;
}