Sass - 函式

描述

SASS 支援使用函式，方法是透過提供一些關鍵字引數，這些關鍵詞引數使用正常的 CSS 函式語法進行指定。

語法

p {
   color: hsl($hue: 0, $saturation: 50%, $lightness: 50%);
}

HSL 代表色相、飽和度和亮度，透過使用飽和度和亮度建立一套匹配的顏色會更直觀。

色相 − 表示顏色的色度，例如 120 表示紅色，240 表示綠色，290 表示淡紫色等。
飽和度 − 這是一個百分比值，可增加顏色的飽和度。
亮度 − 這也是一個百分比值，可降低顏色的亮度。

示例

以下示例演示了在 SCSS 檔案中使用函式 −

<html>
   <head>
      <title>Functions Example</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 Functions</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet..</p>
      </div>
   </body>
</html>

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

style.scss

使用以下 SCSS 程式碼定義 SASS 程式碼上的 HSL 函式。

p {
   color: hsl(290,60%,70%);
}

透過使用以下命令，你可以讓 SASS 檢視該檔案並在 SASS 檔案更改時更新 CSS −

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

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

style.css

p {
   color: #d185e0;
}

輸出

讓我們執行以下步驟，來了解上面給出的程式碼是如何工作的 −

將上述給出的 html 程式碼儲存在 functions.html 檔案中。
在此瀏覽器中開啟此 HTML 檔案，將顯示類似於以下內容的輸出。

sass_script.htm

列印頁面