Sassで@includeと@extendを使用していますか？

Sassでは@include、ミックスインでの使用@extendとプレースホルダークラスでの使用の違いをはっきりと理解できません。彼らは同じことになりますか？

拡張はカスタマイズを許可しませんが、非常に効率的なCSSを生成します。

%button
  background-color: lightgrey
  &:hover, &:active
    background-color: white

a
  @extend %button

button
  @extend %button

結果：

a, button {
  background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
  background-color: white;
}

ミックスインを使用すると、CSSが重複しますが、引数を使用して使用ごとに結果を変更できます。

=button($main-color: lightgrey, $active-color: white)
  background-color: $main-color
  border: 1px solid black
  border-radius: 0.2em

  &:hover, &:active
    background-color: $active-color

a
  +button

button
  +button(pink, red)

結果：

a {
  background-color: lightgrey;
  border: 1px solid black;
  border-radius: 0.2em;
}
a:hover, a:active {
  background-color: white;
}

button {
  background-color: pink;
  border: 1px solid black;
  border-radius: 0.2em;
}
button:hover, button:active {
  background-color: red;
}

この一連のコード例に従って、extendsとmixinを効果的に使用することで、コードをよりクリーンで保守しやすくする方法を確認してください。http：//thecodingdesigner.com/posts/balancing

SASSでは、残念ながらメディアクエリ内で拡張を使用することはできません（上記のリンクからの対応する例は間違っています）。メディアクエリに基づいて拡張する必要がある状況では、ミックスインを使用します。

=active
  display: block
  background-color: pink

%active
  +active

#main-menu
  @extend %active // Active by default

#secondary-menu
  @media (min-width: 20em)
    +active // Active only on wide screens

結果：

#main-menu {
  display: block;
  background-color: pink;
}

@media (min-width: 20em) {
  #secondary-menu {
    display: block;
    background-color: pink;
  }
}

この場合、複製は避けられませんが、Webサーバーのgzip圧縮で処理されるため、あまり気にする必要はありません。

PSメディアクエリ内でプレースホルダークラスを宣言できることに注意してください。

更新2014-12-28：エクステンドは、ミックスインよりもコンパクトなCSS を生成しますが、CSSがgzip圧縮されると、この利点は減少します。サーバーがgzip圧縮されたCSSを提供している場合（実際にそうすべきです！）、拡張機能はほとんどメリットがありません。したがって、常にミックスインを使用できます。詳細はこちら：http : //www.sitepoint.com/sass-extend-nobody-told-you/

両方を使用することをお勧めします。多くのカスタマイズが可能なミックスインを作成し、そのミックスインの一般的な構成を拡張します。例（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);
}

これにより、my-buttonミックスインを何度も呼び出す必要がなくなります。また、一般的なボタンの設定を覚えておく必要はありませんが、必要に応じて非常にユニークな1回限りのボタンを作成することができます。

私はこの例を、少し前に書いたブログ投稿から取り上げます。お役に立てれば。

私の意見では、拡張は純粋な悪であり、避けるべきです。理由は次のとおりです。

与えられた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-classが（多くのブラウザにとって）もはや青くないことを意味します。これはどういう意味ですか？ブラウザーがセレクターを理解できない拡張機能をいつでも使用すると、拡張機能の他のすべての使用は無効になります。この振る舞いは、悪の入れ子を可能にします：

%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は、ブラウザー固有のセレクターで決して使用しない限り、完全に問題ありません。使用すると、使用した場所のスタイルが突然破棄されます。代わりにミックスインに依存してみてください！

パラメータを受け入れる場合はミックスインを使用します。コンパイルした出力は、渡す内容に応じて変化します。

@include opacity(0.1);

スタイルの静的で反復可能なブロックには、拡張（プレースホルダー付き）を使用します。

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

d4nyllによる以前の回答に完全に同意します。拡張オプションに関するテキストがあり、このテーマを調査していたときに、拡張について多くの不満を見つけたので、拡張の代わりにミックスインを使用する可能性がある場合は、拡張をスキップしてください。