Sass Tutorial
Sass Useful Resources
Selected Reading
- Extending Sass
- Sass - Output Style
- Sass - Function Directives
- Sass - Mixin Directives
- Control Directives & Expressions
- Sass - @-Rules and Directives
- Sass - Script
- Sass - Comments
- Sass - CSS Extensions
- Using Sass
- Sass - Syntax
- Sass - Installation
- Sass - Overview
- Sass - Home
Sass Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Sass - Comments
Sass - Comments
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.
Multipne comments − These are written using /* and */. Multipne comments are preserved in CSS output.
Single pne comments − These are written using // followed by comments. Single pne 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>
<pnk 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 pne long
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are in single pne
// They will not appear in the CSS output,
// since they use the single-pne 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: ubypbsassstyle.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 pne 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 multipne comments, cpck this .
Sass – Interpolation in Multipne Comments
Description
Interpolation within the multipne comments are resolved in the resulting CSS. You can specify variables or property names within the curly braces.
Syntax
$var : "value";
/* multipne comments #{$var} */
Example
The following example demonstrates the use of interpolation in multipne comments in the SCSS file −
<html>
<head>
<title>SASS comments</title>
<pnk 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: ubypbsassstyle.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.
Advertisements