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.scss

$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:\ruby\lib\sass\style.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.

Sass - Interpolation in Multiline Comments
sass_comments.htm
Advertisements