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。
使用下面的SCSS代码，它在SASS代码上定义了hsl函数。
p { color: hsl(290,60%,70%); }
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:rubylibsassstyle.scss:style.css
接下来执行上面的命令，它将自动创建style.css文件用下面的代码:
p { color: #d185e0; }
让我们执行以下步骤，看看上面的代码如何工作:
将以上html代码保存在functions.html文件中。
在浏览器中打开此HTML文件，将显示如下输出。
描述多重赋值适用于映射，它们被视为对的列表。如果你想使用map，那么你必须更改@each语句并使用多个分配。语句@each $var1, $va...
其他函数包括不同类型的功能组。下表列出了所有类型的misc函数:S.N.函数及描述1 color它是一个代表颜色的字符串。2image-size 它...
在本章中，我们将学习颜色混合函数。 这些是类似于Photoshop，Fireworks或GIMP等图像编辑器中使用的操作，它们将CSS颜色与您的图...
描述它用于导入LESS或CSS文件的内容。例子下面的例子演示了在LESS文件中使用导入:htmlhead titleLess Importing/title link rel=...
