大前端

主题

@function sass 自定义函数 ​

函数作用 ​

把一些比较复杂或经常用些的内容进行抽离（封装），以便重复使用

函数的定义 ​

以@function关键字定义 sass 函数

scss
@function function-name([$param1,$param2,...]){
	...
	@return $value;
}

TIP

函数名 function-name 与 function_name 是相同的

@return ​

它只允许在@函数体中使用，并且每个@function 必须以 @return 结束。当遇到@return 时，它会立即结束函数并返回其结果。

函数的使用 ​

例如：

scss
// 定义了一个 row-cols-width() 函数, 接收一个数值作为参数，并将数值转为百分比
@function row-cols-width($column) {
  @return percentage(1 / $column); // percentage() 作用是将传入的值转化为本分比
}

@for $i from 1 through 6 {
  .row-cols-#{$i} > * {
    width: row-cols-width($i);
  }
}

函数的参数与默认值 ​

scss
/** 
    *定义线性渐变
    *@param $direction  方向
    *@param $gradients  颜色过度的值列表
 */

@function background-linear-gradient(
  $direction,
  $start-color,
  $end-color: blue
) {
  @return linear-gradient($direction, $start-color, $end-color);
}

正常传参调用 ​

scss
.header {
  background-image: background-linear-gradient(to right, red, green);
}

省略默认值 ​

scss
.header {
  background-image: background-linear-gradient(to right, red);
}

按照参数名传参 ​

scss
.header {
  background-image: background-linear-gradient(
    $start-color: red,
    $direction: to bottom
  );
}

注意：函数参数默认值可以是任意 SassScript 表达式，甚至可以引用前面的参数

任意参数 ​

scss
/** 
    *定义线性渐变
    *@param $direction  方向
    *@param $gradients  颜色过度的值列表
 */

@function background-linear-gradient($direction, $gradients...) {
  @return linear-gradient($direction, $gradients);
}

.header {
  background-image: background-linear-gradient(to bottom, red, green, blue);
}

调用任意参数 ​

scss
$widths: 50px, 30px, 100px;
.logo {
  width: min($widths...);
}

混入 mixin 和函数 function 的区别 ​

  • 混入 mixin 主要是通过传递参数的方式输出多样化的样式，为了可以现实代码复用。
  • 函数的功能主要是通过传递参数后，经过函数内部的计算，最后@return 输出一个值。