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

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

Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形:

A) 传一个不带值的参数

在混合宏中,可以传一个不带任何值的参数,比如:

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

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值

.box {
  @include border-radius(3px);
}

这里表示给混合宏传递了一个“border-radius”的值为“3px”。

编译出来的 CSS:

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

 

任务

在编辑器第 1 行输入正确的代码,声明一个带有参数的混合宏。

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