Sass - 字串運算

說明

可以使用 + 操作連線字串（例如，font-size: 5px+3px）。

示例

以下示例演示了在 SCSS 檔案中使用字串運算 −

<html>
   <head>
      <title>String Operations</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">
         <h3>Example using Sass Strings Operations</h3>
         <p>SASS stands for Syntactically Awesome Stylesheet..</p>
      </div>
   </body>
</html>

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

style.scss

以下 SCSS 程式碼用於連線值，這樣可以增加 <p> 標記語句的字型大小。

p {
   font-size: 5px + 10px;
}

可以透過使用以下命令，告訴 SASS 監視檔案，只要 SASS 檔案發生更改，就更新 CSS −

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

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

style.css

p {
   font-size: 15px;
}

輸出

讓我們執行以下步驟，瞭解所提供的程式碼如何工作 −

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

sass_script.htm

列印頁面

上一個

下一個