sass - Sassで@includeと@extendを使用していますか?

Question

@includeSass では、mixin で使用する場合@extendとプレースホルダー クラスで使用する場合の違いがよくわかりません。それらは同じことになりませんか？

Answer 1

良いアプローチは、両方を使用することです - 多くのカスタマイズを可能にする 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);
}

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

この例は、私が少し前に書いたブログ投稿から引用しています。お役に立てれば。

Answer 2

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

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

Answer 3

パラメータを受け入れる場合はミックスインを使用します。コンパイルされた出力は、渡す内容によって異なります。

@include opacity(0.1);

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

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