SASS Comments - SCSS, SASS and Documentation Types

1. What are SASS Comments?

Primarily, SASS comments structure is somewhat similar to CSS comments and PHP comments. These SCSS comments help designers to put helpful information above various blocks of codes or style rules as mnemonics. Furthermore, these also help when there is a need to share the stylesheet with some other person so that he can undoubtedly understand the purpose of the style declarations after that remark. There are four types to place remarks or comments in this programming language.

1. SCSS Remarks
2. SASS Remarks
3. Documentation Purpose
4. Debugging Purpose

2. SCSS Comments

The SCSS comments type has a slight difference from the indent type due to syntax differences. There are four types of SCSS comments and their use is explained in the below example. These four types are below:

1. // Comment (Compiler excludes it from CSS)
2. /* Comment */
3. /* Multi-line Comment */
4. /*! Single or Multi-line Comment */

// The transpiler or compiler will omit this comment

/* This will be included into CSS stylesheet as comment */

/* A multi-line comment is added
into CSS stylesheet*/

/*! The compiler will add this comment in CSS*/

$bg_color: #dddeee;
$text_color: #222333;
body {
background: /*Excluded from CSS*/$bg_color; /*Included in CSS*/
color: $text_color;
}

/* This will be included into CSS stylesheet as comment */
/* A multi-line comment is added
into CSS stylesheet*/
/*! The compiler will add this comment in CSS*/
body {
background: #dddeee;
/*Included in CSS*/
color: #222333;
}

3. SASS Comments

Similar to SCSS, the SASS comments have five types including an extra type. These types are as below:

1. // Comment (Compiler excludes it from CSS)
2. Comment without any slash (Compiler excludes it from CSS)
3. /* Comment */
4. /* Multi-line Comment */
5. /*! Single or Multi-line Comment */

// The transpiler or compiler will omit this comment
The parser will also avoid adding this into CSS

/* This will add into CSS stylesheet as comment

/* A multi-line comment and it expands upto
next style declaration

/*! This comment will be included in CSS stylesheet

$bg_color: #dddeee
$text_color: #222333

body
background: $bg_color /* Excluded in CSS */
color: $text_color

/* This will add into CSS stylesheet as comment */
/* A multi-line comment and it expands upto
next style declaration*/
/* This comment will be included in CSS stylesheet */
body{
background: #dddeee;
color: #222333;
}

4. SASS or SCSS Comments For Documentation

The documentation comments may support in generating documentation of the whole stylesheet. This documentation can be further used in presentations or other purposes. A documentation comment utilizes three forward slashes /// to define a comment. A software tool named SassDoc interprets these comments to generate wonderful documentation of the stylesheet. These are silent remarks written above the code block to which it is describing.

/// These are the documentation comments
/// map Function is utilized
///
/// Three colors are assigned to Notification panel i.e. Tidbit
/// Green Color --> Success Tidbit
/// Blue --> Success Info
/// Red Color --> Warning Tidbit

@use "sass:map";
$tidbit_colors: (
"success": green,
"info": blue,
"warning": red,
);
.success { background-color: map.get($tibit_colors, "success"); }
.info { background-color: map.get($tibit_colors, "info"); }
.warning { background-color: map.get($tibit_colors, "warning"); }

.success { background-color: green; }
.info { background-color: blue; }
.warning { background-color: red; }

5. SCSS or SASS Comments For Debugging

Accordingly, a SCSS comment is also useful when there is a need for code debugging. Simply put a comment around the style declarations and omit their working in current stylesheet.

/// Site Wide colors is defined below
/// Use these colors only
/*
$color_one: #dddeee;
$color_two: #222333;
*/
body{
background: $color_one; // There will be no background color due to above comment
}