[解決済み] Sassで@includeと@extendを使い分ける？

質問

Sassで @include を使うのと @extend を使うのと、プレースホルダークラスを使うのと。これらは同じことにならないのでしょうか？

どのように解決するのですか？

Extendsはカスタマイズはできませんが、非常に効率的な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;
}

mixinを使うと、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は残念ながらメディアクエリ内でextendsを使用することができないことに注意してください（上記のリンクからの対応する例も間違っています）。メディアクエリに基づいて拡張する必要がある状況では、ミキシンを使用してください。

=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 を生成しますが、CSS が gzip されるとこの利点は失われます。もしあなたのサーバが gzip された CSS を提供するのであれば（本当にそうすべきです！）、その場合 が拡張します。 はほとんど利益を与えません。そのため、常に ミックスイン ! 詳しくはこちら http://www.sitepoint.com/sass-extend-nobody-told-you/