在Sass中使用@include vs @extend？

我认为扩展是纯粹的邪恶，应该避免。原因如下：

鉴于scss：

%mystyle {color: blue;}
.mystyle-class {@extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {@extend %mystyle}

将生成以下CSS：

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
  color: blue;
}

当浏览器不了解选择器时，它将使选择器的整个行无效。这意味着您宝贵的mystyle类不再是蓝色的（对于许多浏览器而言）。这到底是什么意思？如果您在任何时候使用扩展程序而浏览器可能无法理解选择器，则该扩展程序的其他所有使用都会失效。此行为还允许进行邪恶嵌套：

%mystyle {color: blue;}
@mixin mystyle-mixin {@extend %mystyle; height: 0;}
::-webkit-input-placeholder {@include mystyle-mixin} 
//you thought nesting in a mixin would make it safe?
.mystyle-class {@extend %mystyle;}

结果：

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
  color: blue;
}

::-webkit-input-placeholder {
  height: 0;
}

Tl; dr：@extend绝对可以，只要您从未将其与任何浏览器特殊选择器一起使用即可。如果这样做，无论您在哪里使用它，它都会突然拆下样式。尝试依靠mixin代替！

一个好的方法是同时使用两者-创建一个mixin，它将允许您进行大量自定义，然后扩展该mixin的常见配置。例如（SCSS语法）：

@mixin my-button($size: 15, $color: red) {
  @include inline-block;
  @include border-radius(5px);
  font-size: $size + px;
  background-color: $color;
}
%button {
  @include my-button;
}
%alt-button {
  @include my-button(15, green);
}
%big-button {
  @include my-button(25);
}

这样可以避免您一次又一次调用“我的按钮” mixin。这也意味着您不必记住通用按钮的设置，但是您仍然可以选择一个超级独特的一次性按钮。

我以不久前写的博客文章为例。希望这可以帮助。

我完全同意d4nyll的先前回答。有一篇关于扩展选项的文章，当我研究这个主题时，我发现了很多关于扩展的抱怨，所以请记住，如果有可能使用mixin代替扩展，就跳过扩展。

如果mixins接受参数，请使用mixins，其中编译输出将根据传递给它的内容而改变。

@include opacity(0.1);

将扩展（带占位符）用于样式的任何静态可重复块。

color: blue;
font-weight: bold;
font-size: 2em;