在本章中，讓我們學習有關函數指令。在SASS中，你可以創建自己的函數，並利用它們在腳本上下文或可與任何值一起使用。函數是通過使用函數名和與任何參數調用。
示例
下麵的例子演示了 SCSS 檔中使用的函數指令：
function_directive.html
<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:\Ruby22-x64\style.scss:style.css
接著執行上面的命令，它會自動創建 style.css 檔，下麵的代碼：
style.css
#set_width {
padding-left: 95px; }
輸出結果
讓我們來執行以下步驟，看看上面的代碼工作：
保存上面的 html 代碼在function_directive.html檔。在流覽器中打開該HTML檔，得到輸出如下顯示。
