sass 自定义函数

sass 自定义函数

jcLee95 的 CSDN 博客
CSDN 主页https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 :291148484@163.com
本文地址https://blog.csdn.net/qq_28550263/article/details/123350343

相关文章推荐:

  • Sass 内置函数总结
  • sass 混入(mixin)

目 录

1. Sass函数的概念

2. Sass函数 与 Sass混入(mixin)有什么不同?

3. Sass函数 的用法

  • 3.1 函数的定义
    • 3.1.1 函数定义的格式
    • 3.1.2 函数名标识符
  • 3.2 函数的参数
    • 3.2.1 可选参数
    • 3.2.2 按名称传递参数
    • 3.2.3 任意参数

1. Sass函数的概念

函数允许您对SassScript值定义复杂的操作,您可以在整个样式表中重用这些操作。它们使得以可读的方式抽象出通用的公式和行为变得容易。

2. Sass函数 与 Sass混入(mixin)有什么不同?

Sass函数(function) 与 Sass混入(mixin)是一回事吗?虽然两者及其类似,但是当然不是一回事!

从使用形式上看,Sass函数是使用@function定义的,而Sass混入(mixin)是使用@mixin定义并使用@include包含的。

从目的上看,混入的目的是复用某一个Sass样式块。因此对于使用一个一经定义好的混入,我们不认为这是调用,而称之为包含。引入函数更多的是为了让一些复杂的计算和操作过程能够模块化,从而达到复用的目的。

3. Sass函数 的用法

3.1 函数的定义

3.1.1 函数定义的格式

函数是使用@function 指令 定义的。其格式为:

@function <name>(<arguments...>) { ... }. 

与JavaScript中的函数一样,Sass函数也拥有返回值,返回值用@retrurn指令来指示,@return指令只允许出现在@function正文中。每个都@function 必须以 @return,这是和 JavaScript 中的函数不一样的。

例如:

@use "sass:string";@function str-insert($string, $insert, $index) {// 如果不需要的话,避免制造新的字符串。@if string.length($string) == 0 {@return $insert;}$before: string.slice($string, 0, $index);$after: string.slice($string, $index);@return $before + $insert + $after;
}

注:@use指令用于从其他 Sass 样式表中加载mixins、函数和变量,并将来自多个样式表的 CSS 组合在一起。加载的样式表@use称为“模块”。Sass 还提供了很多有用的内置模块,这里的sass:string就是内置模块,这部分可以参考博文Sass 内置函数总结。

又如:

// bootstrap5
@function add($value1, $value2, $return-calc: true) {// 如果第一个值为 null,则加的结果为第二个值@if $value1 == null {@return $value2;}// 如果第二个值为 null,则加的结果为第一个值@if $value2 == null {@return $value1;}// 如果两个值都是数字,并且是可进行比较的(同一单位类型),则返回相加结果@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {@return $value1 + $value2;}@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}

再如:

// 返回不透明颜色
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
}

这段代码中,mix(color1, color2, weight)是Sass内置的函数,用于把两种颜色混合起来,前两个参数都是颜色,最后一个是第二个颜色的比重。

3.1.2 函数名标识符

与所有 Sass 标识符一样,函数名称将连字符和下划线视为相同。这意味着 add-manyadd_many 都指的是相同的功能。这是 Sass 早期的历史遗留问题,当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配CSS的语法,这两者就等同于使迁移更容易。

3.2 函数的参数

参数允许在每次调用函数时自定义函数的行为。参数在@function函数名称之后的规则中指定为用括号括起来的变量名称列表。该函数必须以SassScript 表达式的形式使用相同数量的参数调用。这些表达式的值在函数体中作为相应的变量可用。默认值可以是任何 SassScript 表达式,它们甚至可以引用更早的参数!

3.2.1 可选参数

虽然函数声明的每个参数都必须在包含该函数时传递,但是仍然可以通过定义一个默认值来使参数成为可选参数,这和Sass混入(Mixin)中的可选参数是类似的。如果该参数未传递,则将使用该默认值。默认值使用与变量声明相同的语法:变量名,后跟一个冒号和一个SassScript 表达式。这使得定义灵活的函数 API 变得容易,这些 API 可以以简单或复杂的方式使用。

@function invert($color, $amount: 100%) {$inverse: change-color($color, $hue: hue($color) + 180);@return mix($inverse, $color, $amount);
}$primary-color: #036;
.header {background-color: invert($primary-color, 80%);
}

3.2.2 按名称传递参数

调用函数时,除了按参数列表中的位置传递参数(位置参数)外,还可以按名称传递参数。这对于具有多个可选参数的函数带有布尔参数的函数特别有用,这些参数的含义在没有名称的情况下并不明显。关键字参数使用与变量声明和可选参数相同的语法。
例如:

$my-color: #007fd3;
.box {color: scale-color($my-color, $lightness: +40%);   // 注:scale-color是Sass内置函数
}

3.2.3 任意参数

Sass函数和Sass混入一样,也可以使用任意参数,就像JavaScript中的函数接受一个参数列表一样。函数能够接受任意数量的参数很有用。如果@function声明中的最后一个参数以 结尾…,则该函数的所有额外参数都作为列表传递给该参数。此参数称为参数列表。
例如:

@function add_many($numbers...) {$sum: 0;@each $number in $numbers {$sum: $sum + $number;}@return $sum;
}.my-box {width: add_many(10px, 20px, 30px, 40px, 50px, 60px); // width: 210px;
}

编译成CSS后:

.my-box {width: 210px; }/*# sourceMappingURL=test.css.map */

本文链接:https://my.lmcjl.com/post/2622.html

展开阅读全文

4 评论

留下您的评论.