Sass - 註釋

本章將學習 Sass 的註釋。註釋是非可執行語句，放置在原始碼中。註釋使原始碼更容易理解。SASS 支援兩種型別的註釋。

多行註釋 - 使用 /* 和 */ 書寫。多行註釋保留在 CSS 輸出中。
單行註釋 - 使用//後跟註釋來書寫。單行註釋不會保留在 CSS 輸出中。

示例

以下示例演示了在 SCSS 檔案中使用註釋的方法：

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "https://tutorialspoint.tw/">TutorialsPoint</a>
   </body>
</html>

接下來，建立檔案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; }

可以使用以下命令告訴 SASS 監視檔案並在 SASS 檔案更改時更新 CSS：

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將自動建立包含以下程式碼的style.css檔案：

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; }

輸出

讓我們執行以下步驟來檢視上面給出的程式碼是如何工作的：

將上面給出的 html 程式碼儲存在sass_comments.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

要學習多行註釋中的插值，請點選此連結。

Sass – 多行註釋中的插值

描述

多行註釋中的插值在生成的 CSS 中得到解析。您可以在花括號內指定變數或屬性名稱。

語法

$var : "value";
/* multiline comments #{$var} */

示例

以下示例演示了在 SCSS 檔案中使用多行註釋中插值的方法：

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

接下來，建立檔案style.scss。

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

可以使用以下命令告訴 SASS 監視檔案並在 SASS 檔案更改時更新 CSS：

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將自動建立包含以下程式碼的style.css檔案

style.css

/* Framework version for the generated CSS is 7.8. */

輸出

讓我們執行以下步驟來檢視上面給出的程式碼是如何工作的：

將上面給出的 html 程式碼儲存在sass_comments_interpolation.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

列印頁面