SCSS自定义函数

3 阅读1分钟

SCSS自定义函数

在 SCSS 中, @function 允许你自定义函数,用来封装一段计算逻辑并返回一个具体的值(如颜色、数字、字符串等)。这可以让你将常用的计算过程抽象出来,使样式代码更简洁、更可维护。

1. 基本语法

scss

@function 函数名($参数1, $参数2, ...) {
  // 一些计算或处理
  @return 返回值;
}
  • 函数名:可以包含连字符和下划线,SCSS 中两者等价(如 column-width 和 column_width 视为同一函数)。
  • 参数:可设置默认值,如 $param: 10px
  • @return:必须且只能返回一个值,函数体内可包含控制指令(@if@for 等)和变量。