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

[Sass]混合宏的参数--混合宏的不足

混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如:

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

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS:

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

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

上例明显可以看出,Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

 

任务

  1. //welcome to imooc learn Sass
  2. @mixin border-radius{
  3. -webkit-border-radius: 3px;
  4. border-radius: 3px;
  5. }
  6.  
  7. .box {
  8. @include border-radius;
  9. margin-bottom: 5px;
  10. }
  11.  
  12. .btn {
  13. @include border-radius;
  14. }
下一节