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

Question

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

Answer 1

对的，不带参数的 mixin 等价于 placeholder（效果上等价，但性能上 placeholder 略优）。出现这个困惑是正常的，之所以会出现两者的功用略有重叠是有历史原因的。

总之呢，作为复用的组件，需要传递参数的就定义为 @mixin，不需要的就定义为 placeholder，这算是 Sass 的最佳实践原则之一。尽量不要去 extend class，因为会有冗余，除非那个 class 本来就有用到，不算冗余。

在一般的开发过程当中，placeholder 的使用都会有明显的迹象。比如说重置标准的列表元素（用作容器而不是文本列表）可以这样：

sass%reset-list {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

但是我们很少会把这样的 placeholder 直接用于产品代码，因为从组件化的角度来说它还不够“内聚”，它只是解决了一个组件的一块拼图罢了。多数时候我们还需要进一步的去构造组件：

sass@mixin menu($display: inline-block) {
    @extend %reset-list;    // 不管什么样的 menu，先重置它的盒模型

    display: #{$display}; // 根据传參决定横向／纵向

    // 其他……
}

如此一来，真正在产品代码里使用的就以 mixin 为主了。因为基本上所有的模块你总能找出可变因素的，而那些确实不可变又没有合适的 mixin 用来内聚的 placeholder 才会被用在产品代码中。

Answer 2

@mixin 和 % 的区别还是很大的。

• 前者是方便代码的重用，如给一些 CSS3 的属性添加前缀等；
• 后者的是一个选择器，类似于 CSS 中的 id 选择器 (#) 和 类选择器 (.) 。主要用于 @extend 指令，好处是和 CSS 默认的选择器作区分，减少冲突，不会影响样式文件中的其他样式。

REFERENCE

• SASS Mixins
• Understanding placeholder selectors