用户自定义的函数

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

函数的功能就是,你可以把一些值交给函数去处理,怎么样处理取决于函数本身的设计,最终函数会返回处理之后的结果。我们之前已经用到了一些 Sass 本身自带的函数。你也可以根据自己的需求去定义自己的函数。

要用的是 @function 这个指令 ... 它的后面是函数的名字 ... 然后在括号里,可以设置这个函数可以授受的参数,函数要做的事,放到一组大括号里,在函数的内部,你可以使用函数支持的参数去做一些运算 ... 这些参数会在用户执行这个函数的时候传递进来。

下面,我们就去定义一个函数 ... 这个函数做的事就是去返回 $colors 这个 map 数据里的指定的 key 的值 ... 先定义一个变量 .. 叫 $colors ... 它的值是一个 map 类型的数据 .. 里面有两个项目 ...

$colors: (light: #ffffff, dark: #000000);

再去定义一个函数 ... 输入 @function ... 后面加上函数的名字 ... 我们可以叫它 color ... 再输入一组括号 ...括号里就是这个函数支持的参数 ... 给它添加一个叫 $key 的参数 ...

把函数要做的事放到一组花括号里面 ... 用一个 @return 这个指令,去返回函数运算之后的结果 ... 这里我用一个 map-get 函数 .. 在 介绍 map 类型的数据的时候,我们介绍过这个函数的功能 ... 它可以返回指定 map 的 key 的值 ...

@return map-get($colors, $key);

这样,我们就定义好了一个函数,名字叫做 color ... 它支持一个参数 ... 这个函数做的事就是去返回在 $colors 这个 map 里面的指定的 key 的值 ...

在下面,我们再添加一段样式,去使用这个函数 ... 选择器是 body ... 里面用一个 background-color 的属性 ... 它的值可以使用 color 这个函数得到 ... 输入 color ... 然后在括号里去指定这个函数的参数的值 ... 输入 light ...

保存 ... 在输出的结果里面,你会看到,这个背景颜色属性的值是 #ffffff ... 这个值就是 $colors 这个 map 数据里的 light 这个 key 的值 ...

用户自定义的函数《 Sass 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点