4-11 [Sass]混合宏的参数--传一个带值的参数
本节编程练习不计算学习进度,请电脑登录imooc.com操作

[Sass]混合宏的参数--传一个带值的参数

在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如:

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只需要调用默认的混合宏“border-radius”:

.btn {
  @include border-radius;
}

编译出来的 CSS:

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:

.box {
  @include border-radius(50%);
}

编译出来的 CSS:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

 

任务

在编辑第 1 行中输入正确的代码,使用混合宏 border-radius 带有一个赋值为 3px 的 $radius 参数

  1. //welcome to imooc learn Sass
  2. @mixin border-radius($radius:?){
  3. -webkit-border-radius: $radius;
  4. border-radius: $radius;
  5. }
  6.  
  7. .btn {
  8. @include border-radius;
  9. }
下一节