当@mixin不带参数的时候是不是二者都一样啊
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
对的,不带参数的 mixin 等价于 placeholder(效果上等价,但性能上 placeholder 略优)。出现这个困惑是正常的,之所以会出现两者的功用略有重叠是有历史原因的。
总之呢,作为复用的组件,需要传递参数的就定义为 @mixin,不需要的就定义为 placeholder,这算是 Sass 的最佳实践原则之一。尽量不要去 extend class,因为会有冗余,除非那个 class 本来就有用到,不算冗余。
在一般的开发过程当中,placeholder 的使用都会有明显的迹象。比如说重置标准的列表元素(用作容器而不是文本列表)可以这样:
%reset-list {
margin: 0px;
padding: 0px;
list-style: none;
}
但是我们很少会把这样的 placeholder 直接用于产品代码,因为从组件化的角度来说它还不够“内聚”,它只是解决了一个组件的一块拼图罢了。多数时候我们还需要进一步的去构造组件:
@mixin menu($display: inline-block) {
@extend %reset-list; // 不管什么样的 menu,先重置它的盒模型
display: #{$display}; // 根据传參决定横向/纵向
// 其他……
}
如此一来,真正在产品代码里使用的就以 mixin 为主了。因为基本上所有的模块你总能找出可变因素的,而那些确实不可变又没有合适的 mixin 用来内聚的 placeholder 才会被用在产品代码中。