今天学习SASS，@mixin和%傻傻分不清楚，求指导

Question

当@mixin不带参数的时候是不是二者都一样啊

Answer 1

对的，不带参数的 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 才会被用在产品代码中。