web-dev-qa-db-ja.com

SASSおよびBootstrap-ミックスインと@extend

私は BootstrapのSASSポート を使用していますが、定義済みのミックスインを使用することとSASSの@extendを使用することの間に違いがあるかどうか疑問に思っています。

たとえば、私が持っている場合：

<div class="wrapper">
    Some content here....
</div>

行うことの間に違いはありますか

.wrapper {
    @include make-row();
}

そして

.wrapper {
    @extend .row;
}

？

違いがない場合、単一の@extendステートメントと同等ではない他のミックスインはありますか？そのようなミックスインがない場合、ミックスインが存在するのはなぜですか？

csstwitter-bootstrapsass
27
Ellis Michael

@extendとミックスインの大きな違いは、CSSのコンパイル方法です。単純な例ではあまり見えませんが、違いと影響は大きく、不注意に使用すると、実際に頭痛の種になる可能性があります。 @extendは、愚かな金に少し似ていますが、最初は見栄えがしますが...

簡単な例を見てみましょう：

@ extend

.row {
    width: 50px;
}
.new-row {
    @extend .row;
}
.another-row {
    @extend .row;
}

コンパイル：

.row,
.new-row,
.another-row {
     width: 50px;
}

mixin

@mixin row() {
    width: 50px;
}
.new-row {
    @include row();
}
.another-row {
    @include row();
}

コンパイル：

.new-row {
   width: 50px;
}
.another-row {
   width: 50px;
}

ミックスインには、ヒットするすべての場所にプロパティが含まれます-毎回それらをコピーします-@extendはセレクターをグループ化し、プロパティを一度定義します。違いはコンパイルされたcssにあるため、これはすぐには明らかではありませんが、いくつかの重要な影響があります。

読み込み順序

@extendを使用すると、sassの最初のポイントでセレクターがグループ化され、セレクターが発生すると、奇妙な上書きが発生する可能性があります。セレクターを定義し、@extendを使用してプロパティを取り込み、sassで以前に定義されたプロパティをオーバーライドしようとしたが、拡張プロパティがcssでグループ化された後、オーバーライドが機能しない。これはかなり困惑することがあります。

この論理的に順序付けされた一連のcss定義と可能性のあるHTMLを検討してください：<div class='row highlight-row'></div>：

.red-text {
    color: red;
}
.row {
    color: green;
}
.highlight-row {
    @extend .red-text;
}

コンパイル：

.red-text,
.highlight-row {
    color: red;
}
.row {
    color: green;
}

したがって、sassの順序付けで行の色が赤に見えるようにしても、コンパイルされたcssはそれを緑にします

グループ化が不十分

@extendを使用すると、結果のCSSでセレクターのグループ化が不十分になる可能性があります。たとえば、30から40の無関係なものすべてが同じプロパティを共有することになります。フォントに@extendを使用することは、この良い例です。

ネスティング

深くネストされたsass（これは良くないですが）を使用していて、@extendを使用する場合、使用するすべての@extendに対して完全にネストされたセレクターを複製するため、CSSが肥大化します。私はこれをたくさん見ました：

.selector-1 .selector-2 .selector-3 .selector-4,
.selector-1 .selector-2 .selector-3 .selector-4 a,
.selector-1 .selector-2 .selector-3 .selector-4 li,
.selector-1 .selector-2 .selector-3 .selector-4 td {
    font-family: ariel;
}

SASSを初めて使用する場合は、コンパイルされたcssを確認することをお勧めします。

メディアクエリ

@extendメディアクエリはセレクタではないため、メディアクエリ内では機能しません。

結論

私の経験則では、パラメーターがない場合およびで、@ extendを適切に定義して共有できる場合は、ミックスインでは@extendを使用しますたとえば、sassモジュールを定義する同じファイル内など、sassの近くに存在する密接に関連するいくつかのセレクターの1つです。ボタンはよく使われる@extendの良い例です：

%button {
    padding: 10px;
}
.call-to-action {
    @extend %button;
    background-color: $green;
}
.submit {
    @extend %button;
    background-color: $grey;
}

選択に役立つ最良の記事は ここ です。

PS、%記号は placeholder extends の使用です

87
Toni Leigh