在Sass 3.2之后是否存在从正常选择器扩展的有效用例？

Question

占位符在Sass 3.2中引入。这个blog post建议我们不要扩展普通选择器，并且几乎总是从占位符扩展，因为@extend will add onto all the selectors it is extending from，但这不适用于占位符。

关注Sass文件......

.button {
  display: block;
  padding: 10px;
  background: green;
}
.sidebar .signup .button {
  margin-top: 22px;
}
.article a {
  @extend .button;
}

...将生成...

.button, .article a { /* This is probably what you intended to do */
  display: block;
  padding: 10px;
  background: green;
}

/* But it also generates this combinational mess */
.sidebar .signup .button, .sidebar .signup .article a, .article .sidebar .signup a {
  margin-top: 22px;
}

使用占位符可以防止这种情况发生。

在Sass 3.2之后是否存在从普通选择器扩展的有效用例？

Answer 1

可能有些情况下你可以使用它，但总是你没有很好的理由去做，最好避免它并使用占位符来扩展。

如果您确定它们非常密切相关且要扩展的代码量相关，则只应扩展一个类。