Sass中的可变参数
原创
SASS 中的可变参数和 LESS 中也一样，只不过由于 SASS 不是使用 JS 实现的，所以不能直接在混合中使用 arguments，必须通过 $args... 的格式来定义可变参数，然后通过 $args 来使用，注意点：和 LESS 一样可变参数必须写在形参列表的最后：
@mixin animate($name, $time, $mode, $delay) {
transition: $name $time $mode $delay;
}
div {
width: 200px;
height: 200px;
background: red;
@include animate(all, 4s, linear, 0s);
}
div:hover {
width: 400px;
height: 400px;
background: blue;
}
image-20210815000225421
- 通过
$args...的格式来定义可变参数，然后通过$args来使用
@mixin animate($args...) {
transition: $args;
}
div {
width: 200px;
height: 200px;
background: red;
@include animate(all, 4s, linear, 0s);
}
div:hover {
width: 400px;
height: 400px;
background: blue;
}
image-20210815000534098
- 和 LESS 一样可变参数必须写在形参列表的最后
@mixin animate($name, $time, $args...) {
transition: $name $time $args;
}
div {
width: 200px;
height: 200px;
background: red;
@include animate(all, 4s, linear, 0s);
}
div:hover {
width: 400px;
height: 400px;
background: blue;
}
image-20210815000620892
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
