Updated April 6, 2023
Introduction to SASS Comments
Using SASS pre-processors to support in well-formatted CSS generation has become a standard. In SASS, comments are quite similar to those in any other programming language. The commented code is quite essential and should be used both for PHP code and CSS. There are two types of comments which can be used when operating with SASS pre-processor:
- Single line comments: These comments are also called as silent comments.
- Multi-line comments: These comments are also called as loud comments.
SASS produces well-formatted CSS and simplifies the structure and management of our style sheets.SASS enables everyone to use nested rules, variables, mixins, and much more, which adds an element of complexity to our style sheets. Because of this, comments in CSS code are very important.
Types of SASS Comments
We will discuss how to use comments in SASS with the help of examples:
1. Single Line Comments
Single line comments start with // which means a comment begins and works till the end of the whole line. There will be no emphasis on styles written on the next line. If you would like to comment on a couple of lines, you need to add // in each of the lines you want to make a comment on.
Advantages:
- Great for tiny or short comments
- Effective for commenting on particular styles
- They will not appear in compiled CSS
Syntax:
// single line comment her
body {
color: red;
}Example
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Comments Example </title>
<link rel="stylesheet" type="text/css" href="sass_single_line.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
</body>
</html>Now create a file called sass_single_line.scss with the below code:
Code:
//This is single line comment, and it will not appear in the css file
.heading{
color: #006400;
font-size:20px;
font-style:italic;
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_single_line.scss: sass_single_line.css
Now, execute the file with the above command and it will create the sass_single_line.css file as shown in the below code:
Code:
.heading {
color: #006400;
font-size: 20px;
font-style: italic;
}Output:
- Save the above given HTML code in the HTML file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
2. Multi Line Comments
Multi-line comments start with symbols /* and finish after the */ symbols have been closed. Within your style sheet, this form of comment can extend one or more lines. If you have quite a few long comments and would like to split them into separate lines, then this type of comment can be useful. When you use multi-line comments in SASS files, these will appear in the compiled style sheets.
The main advantage of this type of comment is to provide good readability.
Syntax:
/*Multi line comment here
Some more comment lines*/
body {
color: red;
}Example
Code:
Create an HTML file called sass_multi_line_comment.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Comments Example </title>
<link rel="stylesheet" type="text/css" href="sass_multiline.css"/>
</head>
<body><br>
<div class="heading">
<p> Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
</div>
<div class="heading1">
<p> It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain. </p>
</div>
</body>
</html>Create a file called sass_multiline.scss with the below code:
Code:
/*
This is multi line comments
and comments will appear in the CSS file
*/
.heading{
color: #006400;
font-size:20px;
font-style:bold;
}
.heading1{
color: #8B008B;
font-size:18px;
font-style:italic;
}Execute the file with the command which is shown in the previous example and it will create the sass_multiline.css file with the below code:
Code:
/*
This is multi line comments
and comments will appear in the CSS file
*/
.heading {
color: #006400;
font-size: 20px;
font-style: bold;
}
.heading1 {
color: #8B008B;
font-size: 18px;
font-style: italic;
}Output:
- Save the above-given HTML code in the HTML file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Conclusion
In this article, we have studied about SASS comments to produce the well-formatted CSS. Comments should be accurate and updated at all times. Well-commented code and information will reduce time in the future because it will keep code clear and simple and make it very easy to navigate through style sheets. Using single line comments is the best choice when dealing with streamlined and minified style sheets since they will not be included with the compiled CSS and would not give any weight to the compiled documents. Comments of a single line will be not be kept in the finished CSS, regardless of which output style you use to compile your Sass to CSS.
Recommended Articles
This is a guide to SASS Comments. Here we discuss a brief overview on SASS Comments and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
