Sass - 插值

說明

它使用 #{ } 語法在選擇器和屬性名稱中提供 SassScript 變數。您可以在大括號內指定變數或屬性名稱。

語法

#{$name}

其中 $name 是變數或屬性名稱。

例項

以下示例演示在 SCSS 檔案中使用插值 -

<html>
   <head>
      <title>Interpolation</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <h2>Example using Interpolation</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet...</p>
      </div>
   </body>
</html>

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

style.scss

p:after {
   content: "I have #{8 + 2} books on SASS!";
}

您可以透過使用以下命令告訴 SASS 監視檔案並在 SASS 檔案發生更改時更新 CSS -

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

接下來，執行上述命令；它會自動使用以下程式碼建立 style.css 檔案 -

style.css

p:after {
   content: "I have 10 books on SASS!";
}

輸出

讓我們執行以下步驟來了解上述程式碼如何工作 -

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

sass_script.htm

列印頁面