什么时候用继承,占位符,混合宏?

他们的声明方式和调用方式:

 

 

 1.继承与混合宏:

对于继承(包括@extend和%placeholder)和混合宏,总结出以下几点:

  (1)继承和混合宏都能实现相同代码块的重用,极大提高开发效率;

  (2)继承的使用一般不存在代码冗余,而混合宏的使用会存在代码冗余

  (3)继承不能传递参数,而混合宏可以传递参数

举例:对比继承和混合宏的区别:

 

 

 

 

 

 

 

 

 举例2:使用混合宏来实现

 

编译出来的CSS代码:

 

 

 

 

 

 

 上面的例子可以看出:混合宏有一个致命的缺点:编译出来的CSS不会把相同的代码块合并,造成代码冗余。

但是,混合宏也有一个明显的优点,可以使用传递参数的方式来封装功能代码块。

 

 

 

 

 

 所以:在实际开发的过程中,对于“功能代码块”(类似于JavaScript中的函数)我们都是使用混合宏来实现的,因为功能代码块往往是可以通过传递不同的参数来满足我们开发的不同需求。

2.“继承@extend”和“占位符%placeholder”

  占位符%placeholder只是配合@extend,如果,需要保留基类,就只用@extend来实现,

  如果不需要基类,就使用%placeholder,配合@extend来使用。

参见前面的笔记。

 

posted @ 2019-10-08 15:16  Moliy-Moliy  阅读(197)  评论(0编辑  收藏  举报