SASS 教程中的函数
SASS 教程中的函数
Sass 函数可以接收参数并返回单个值。
他们在编写 CSS 代码时添加了编程元素，我们现在可以做数学题了！
标准数学运算符 + , - , * , / ， 和 % 都可以使用。
示例函数
以下函数可以接受两个参数， $第一个数字 和 $第二个号码 .函数返回的值是两个变量的和：
@function add-numbers($first-number, $second-number) {
@return $first-number + $second-number
}
假设我们要替换 a 的值 填充 具有两个单独值之和的属性。
我们将调用我们的函数并传入参数，如下所示：
.box1 {
填充：添加数字（5px，10px）；
}
生成的 CSS 输出将是：
.box1 {
填充：15px；
}
让我们看看完整的代码：
还有我们的 SASS：
@function add-numbers($first-number, $second-number) {
@return $first-number + $second-number
} .navbar {
背景颜色：红色；
填充：添加数字（5px，100px）；
ul {
列表样式：无；
}
李{
文本对齐：居中；
保证金：1rem；
}
}
如您所见，函数可以帮助您编写更具可读性和 DRY Sass，因为您可以以非常有效的方式利用可重用逻辑。当您开始从事更大、更复杂的项目时，这可能会产生巨大的影响！
结论
如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！
让我们联系
最初发表于 https://dev.to 2022 年 9 月 3 日。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号