学习sass的内置函数

内置函数

就是sass内建的函数，无需提前声明，可以直接使用，详情可参考：附1.内置模块

自定义函数

基本结构：

@function 函数名 (参数1, 参数2) {
  // 您的代码
  @return 返回值
}

使用例子：

// 声明函数
@function toBig ($num) {
    @return $num +10px
}

div {
    // 调用该函数
    font-size: toBig(20px);
}

输出结果：

div {
  font-size: 30px;
}

函数的参数

位置参数

如未特殊指定，我们声明函数时定义的参数就是位置参数。函数调用的时候按照顺序依次进行传递。

@function toBig ($num, $step) {
    @return $num +$step;
}
// 调用
toBig(20px, 40px)

我们调用的时候，20px 按照顺序来传，传给 $num，40px 按照顺序来传，传给 $step，

关键词参数

调用函数时，位置参数是按照定义参数的顺序依次传递，如果使用关键词参数，则可以打乱顺序来传递参数。关键词参数只是调用函数时传参形式的区别，和函数定义无关。

// 声明函数
@function toBig ($num, $step) {
    @return $num;
}

div {
    // 调用该函数
    font-size: toBig($num: 40px, $step: 10px);
}

默认参数

默认参数是指函数定义时可以给某些参数指定一个默认值，如果函数调用时传递了对应参数，则忽略默认参数值，如果没有传递，则使用默认参数值。

// 声明函数
@function toBig ($num, $step: 30px) {
    @return $num +$step;
}

div {
    // 调用该函数
    font-size: toBig($num: 40px);
}

任意参数

如果一个函数允许用户传递任意个参数，那么可以使用任意参数来接收，在形参后面紧跟三个点 ... 即可。接受到的值是一个列表。

// 声明函数
@function test ($num...) {
    @debug $num;
    @return $num
}

div {
    box-shadow: test(10px 10px 5px 3px red);
}