如何编写自定义Sass 函数

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

如果您构建过不少网站,可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中,我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。

最近几个月我一直在讲Sass的数据类型、运算符和函数。我们讲过了numbersstringscolorscolors againlistslists again, 和maps。过去几周我讲到了控制指令。今天是该系列的最后一部分,我想以@function指令和如何编写自定义函数结课。

如何创建和使用自定义函数

函数是可返回一个Sass任何数据类型单一值的代码块。创建自定义函数需要两个Sass指令,@function@return。前者创建函数,后者表明了函数将返回的值。

@function function-name($args) { 
    @return value-to-be-returned;
}

传递到函数中的参数是可选的,尽管你会经常使用它们。通常Sass函数会使用传递过去的参数进行运算,也可能是一些所有函数都可以访问的全局变量

由于历史原因,函数名可交替使用破折号或下划线,故function-namefunction_name是相同的函数,可使用破折号或下划线调用函数,无论命名时使用的是哪个。

上述代码只显示了一行返回一个值的代码,但大多数函数所做的并不仅限于此,于是@return指令将会作为函数的最后一行。

记得只有一个值返回,这个值可以是任何的数据类型,返回的可以是数字9,字符串"I am a string",或者一种数据结构,比如listmap,里面包含您想要的任何值。

要使用函数您需要提供函数名和参数,放在

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/custom-sass-functions.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部