”;
In this chapter, we will study about Sass Comments. Comments are non-executable statements, which are placed in source code. Comments make source code easier to understand. SASS supports two types of comments.
-
Multiline comments − These are written using /* and */. Multiline comments are preserved in CSS output.
-
Single line comments − These are written using // followed by comments. Single line comments are not preserved in CSS output.
Example
The following example demonstrates the use of comments in the SCSS file −
<html>
<head>
<title>SASS comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
</body>
</html>
Next, create file style.scss.
style.scss
/* This comment is
* more than one line long
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }
You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −
sass --watch C:rubylibsassstyle.scss:style.css
Next, execute the above command; it will create the style.css file automatically with the following code −
style.css
/* This comment is
* more than one line long
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: blue; }
Output
Let us carry out the following steps to see how the above given code works −
-
Save the above given html code in sass_comments.html file.
-
Open this HTML file in a browser, an output is displayed as shown below.
To study about interpolation within multiline comments, click this link.
Sass – Interpolation in Multiline Comments
Description
Interpolation within the multiline comments are resolved in the resulting CSS. You can specify variables or property names within the curly braces.
Syntax
$var : "value";
/* multiline comments #{$var} */
Example
The following example demonstrates the use of interpolation in multiline comments in the SCSS file −
<html>
<head>
<title>SASS comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<p>This is an example for Interpolation in SASS.</p>
</body>
</html>
Next, create file style.scss.
style.css
$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */
You can tell SASS to watch the file and update the CSS whenever SASS file changes, by
using the following command −
sass --watch C:rubylibsassstyle.scss:style.css
Next, execute the above command; it will create the style.css file automatically with the
following code
style.css
/* Framework version for the generated CSS is 7.8. */
Output
Let us carry out the following steps to see how the above given code works −
-
Save the above given html code in sass_comments_interpolation.htm file.
-
Open this HTML file in a browser, an output is displayed as shown below.
”;