Sass - 函式指令

在本章中，我們將學習函式指令。在 SASS 中，您可以建立自己的函式並在指令碼上下文中使用它們，或者與任何值一起使用。函式透過使用函式名稱和任何引數來呼叫。

示例

以下示例演示了在 SCSS 檔案中使用函式指令：

function_directive.htm

<html>
   <head>
      <title>Nested Rules</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" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

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

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

您可以告訴 SASS 監視該檔案並在 SASS 檔案更改時更新 CSS，方法是使用以下命令：

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

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

style.css

#set_width {
   padding-left: 95px; 
}

輸出

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

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

在輸出中，您可以看到正在應用左填充。

就像 mixin 一樣，函式也可以訪問全域性定義的變數，並且也可以接受引數。您應該使用@return呼叫函式的返回值。我們可以使用關鍵字引數呼叫 SASS 定義的函式。

按如下所示呼叫上述函式。

#set_width { padding-left: adjust_width($n: 10); }

命名約定

為了避免命名衝突，函式名稱可以加字首，以便於區分。像 mixin 一樣，使用者定義的函式也支援可變引數。函式和其他 SASS 識別符號可以使用下劃線 (_) 和連字元 (-) 交換使用。

例如，如果一個函式定義為adjust_width，則可以使用adjust-width，反之亦然。

列印頁面