章节
问答
课签
笔记
评论
占位
占位

[Sass]混合宏的参数--传多个参数

Sass 混合宏除了能传一个参数之外,还可以传多个参数,如:

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的:

.box-center {
  @include center(500px,300px);
}

编译出来 CSS:

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

  有一个特别的参数“”。当混合宏传的参数过多之时,可以使用参数来替代,如:

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

在实际调用中:

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

编译出来的CSS:

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

任务

在编辑器第 1 行输入正确代码,使混合宏 size 带有两个参数 $width 和 $height。

?不会了怎么办
||
1
//welcome to
    imooc learn
    Sass
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / 63340
第一种是@mixin size($width,$height),调用时传参的是@include size(500px,300px);第二种是@mixin size($width...),调用传参的方法有@include size(500px 300px)和@include size(500px,300px),表示一个参数里有多个值,这里编译之后的表现形式是width:500px 300px和width:500px,300px。如果是使用@include size(500px,300px)调用给同一个参数的...

已采纳回答 / 慕丝6883190
sass中的if就是要写做@if,这是规定~

最新回答 / 年少戏红颜
可以是8个,也可以是2个,还可以使用...的形式,变成任意数量的变量

最新回答 / 车安然
怎样写算没有传参数

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言