Single-Line Comments
The Single-Line Comments in Sass are comments that only occupy a single line in the script. This line is disregarded by the compiler and is thus only visible to the developer. The Single-Line comments start with the // syntax followed by the comment string.
It is important to note that the Single-Line comments are not preserved in CSS files. These comments are only visible in the .scss file and not in the final .css file.
As an example, consider this styles.scss file.
styles.scss
// Single Line Comment Example
// This text will disappear in the CSS output,
//This is the body section code
body { background-color: black;
color:red;
margin:5rem;
}
//This is the anchor tag code
a { color: white;
font-size:2rem;
}
//This is the paragraph tag code
p { color: yellow;
font-size:1rem;
}
However, the final CSS file will not display any comments made using the Single-Line Syntax after saving this file.
styles.css
body {
background-color: black;
color: red;
margin: 5rem;
}
a {
color: white;
font-size: 2rem;
}
p {
color: yellow;
font-size: 1rem;
}
Multi-Line Comments
The Multi-Line Comments solve the two disadvantages of Single-Line Comments: The use of // at each line to create a comment and their inability to preserve those comments in the final CSS file.
styles.scss
/* Multi-Line Comment Example */
/* This text will appear in the CSS output */
// This text will not appear in the CSS output
/* This comment is
more than one line long
since it uses the CSS comment syntax
*/
/* This is the body section code */
//This is the body section code
body { background-color: black;
color:red;
margin:5rem;
}
/* This is the anchor tag code */
//This is the anchor tag code
a { color: white;
font-size:2rem;
}
/* This is the paragraph tag code */
//This is the paragraph tag code
p { color: yellow;
font-size:1rem;
}
Now, even after saving the final CSS file, will preserve the Multi-Line Comments
styles.css
/* Multi-Line Comment Example */
/* This text will appear in the CSS output */
/* This comment is
more than one line long
since it uses the CSS comment syntax
*/
/* This is the body section code */
body {
background-color: black;
color: red;
margin: 5rem;
}
/* This is the anchor tag code */
a {
color: white;
font-size: 2rem;
}
/* This is the paragraph tag code */
p {
color: yellow;
font-size: 1rem;
}
Documentation Comments
When we maintain a diary, we often tend to use different colors and strokes while writing to make our documentation more beautiful and appealing. The same principle applies to Documentation Comments. The documentation comments give different colors to mixins, functions, variables, and placeholder selectors that further improve the quality of commenting and make the labels more readable.
The Documentation Comments use the /// syntax followed by the function, variable, or mixin name.
Consider the file below
styles.scss
/// @param {number} $base
/// The number to multiply by itself.
/// @param {integer (unitless)} $exp
/// The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exp`.
@function pow($base, $exp) {
$res: 1;
@for $_ from 1 through $exp {
$res: $res * $base;
}
@return $res;
The above code shows how Documentation Comments make the code more intriguing and readable.
FAQs
-
What are the types of comments in Sass?
Sass supports three types of comments:
Single-Line Comments
Multi-Line Comments
Documentation Comments
-
How to preserve a Sass Comment in a CSS file?
Sass Comments can be preserved with the help of Multi-Line Comments.The Multi-Line comments use the /* */ syntax .
Key Takeaways
In this article, we learned about Comments in Sass and how they help hide code logic and explanation from the compiler. We also learned the critical difference between Single and Multi-Line Comments. However, this isn’t enough, as there is always much more to explore and learn about this vast field of Web Development. To know more about Sass and its intricacies, check out the articles on Sass or enroll in our highly curated Web Development course.
310+ registered 
