@extend を使用する場合 Mixin_html/css_WEB-ITnose を使用する場合

いつ @extend を使用し、いつ mixin を使用するのですか? これは私がよく尋ねられる質問です。古い経験によると、パラメーターなしの mixin は良くなく、生成される結果はエラーだらけです。重複コードなので少し汚いです。以下で詳しく説明するように、真実はこの声明よりも微妙です。

@extend を使用する場合

本題に入りますが、私の提案は @extend を使用しないことです。

黄鉄鉱、黄鉄鉱など 黄鉄鉱は金色の鉱物の俗称で、比較的価値が低いため、本物と間違われます。多くの規約とその他の注意事項があります。

本当に @extend を使用したい場合は、次のようにしてください:

1. もう一度考えてください

2. プレースホルダーを使用してみてください

3. コンパイルされたコンテンツに注意してください

理論的には @extend は優れていますが、実際のアプリケーションでは間違いやすい箇所が多すぎます。スタイル ファイルのサイズが 2 倍を超えているのを見たことがあります。ソース コードの順序が壊れているのを見たことがあります。4095 セレクターのバグが発生したのを見たことがあります。

Internet Explorer 6 ～ 9。

– シートには最大 4095 個のルールを含めることができます

– シートには最大 31 シートを @import できます

– @import ネストは最大 4 レベルの深さをサポートします

IE10 (任意のブラウザ/ドキュメント モード):

– シートには最大 65534 を含めることができますrules

– ドキュメントでは最大 4095 のスタイルシートを使用できます

– @import のネストは 4095 レベルに制限されています (4095 スタイルシートの制限のため)

そのような機能やツールの利点は明らかではありませんが、間違った場合に多大な問題を引き起こすため、注意して使用する必要があります。 4095 セレクターのバグを回避するためにスタイル シートを分割する必要がある場合、それは使用しているツールが非常に不合理であることを意味します。

免責事項: 私は @extend が嫌いではないことを説明する必要があると思います。ただ、これを正しく使用し、用心深くするときに注意すべきことがたくさんあると考えているだけです。

本当に使いたい場合、いつ使いますか?

非常に重要な点ですが、@extend は階層関係を作成します。これを使用すると、他の場所にあるスタイルと階層関係を別の階層関係に移植することになります。その結果、これらすべてのセレクターは関連しており、@extend を誤って使用すると誤った階層が作成されます。 CD コレクションを色別に並べるのと同じように、それは機能しますが、関連付けは役に立ちません。

適切な機能を関連付けることが重要です。

人々はよくこのようなコードを書きます。私も以前にこのように書いたことがあります (... が 100 行のコードを表すと仮定します):

%brand-font {font-family: webfont, sans-serif;font-weight: 700;}...h1 {@extend %brand-font;font-size: 2em;}....btn {@extend %brand-font;display: inline-block;padding: 1em;}....promo {@extend %brand-font;background-color: #BADA55;color: #fff;}....footer-message {@extend %brand-font;font-size: 0.75em;}

生成された結果は次のとおりです。

h1, .btn, .promo, .footer-message {font-family: webfont, sans-serif;font-weight: 700;}...h1 {font-size: 2em;}....btn {display: inline-block;padding: 1em;}....promo {background-color: #BADA55;color: #fff;}....footer-message {font-size: 0.75em;}

ここでの問題は、数百行離れたまったく無関係なルールを無理やりまとめてしまい、これらのルールを不必要なつながりにしてしまっていることです。たまたますべてが同じスタイル ルールを使用しているため、コードの優先順位が大幅に上昇し、非常に悪いことです。

関係のないコードとルールを共有するためだけに、セレクターを不適切な場所に移動するコード数百行は、@extend の正しい使用法ではありません (実際、これは @extend の典型的な不適切な使用法です)。パラメーターを使用した mixin のアプリケーション シナリオについては、後で詳しく説明します)。

次のような @extend の別の誤った使用法:

%bold {font-weight: bold;}....header--home > .header__tagline {@extend %bold;color: #333;font-style: italic;}....btn--warning {@extend %bold;background-color: red;color: white;}....alert--error > .alert__text {@extend %bold;color: red;}

生成される結果は次のとおりです:

.header--home > .header__tagline,.btn--warning,.alert--error > .alert__text {font-weight: bold;}....header--home > .header__tagline {color: #333;font-style: italic;}....btn--warning {background-color: red;color: white;}....alert--error > .alert__text {color: red;}

生成されたコードは 299 バイトです

重複は避けたいかもしれませんが、コードが長くなる可能性があります。

この文を毎回 font-weight:大胆に書くと、コードは 264 バイトしかありません。これは単なる小さなテストですが、そうすることで得られる利益が減少することを示しています。 @extend は 1 つのスタイルのみを継承するため、結果が逆効果になる可能性があります。

それでは、いつ @extend を使用する必要があるのでしょうか?

本当に接続されたルールに使用される、完璧な使用法は次のとおりです:

.btn,%btn {display: inline-block;padding: 1em;}.btn-positive {@extend %btn;background-color: green;color: white;}.btn-negative {@extend %btn;background-color: red;color: white;}.btn-neutral {@extend %btn;background-color: lightgray;color: black;}

生成された結果は次のとおりです:

.btn,.btn-positive,.btn-negative,.btn-neutral {display: inline-block;padding: 1em;}.btn-positive {background-color: green;color: white;}.btn-negative {background-color: red;color: white;}.btn-neutral {background-color: lightgray;color: black;}

これは @extend の正しい使用法です。 CSS ルールには継承関係があります。偶然ではなく、同じ理由で同じスタイルを共有します。また、同じセレクターが何百行にもわたって存在することはありません。

ミックスインを使用する場合

「パラメーターのないミックスインは悪い」という経験には正しい面もありますが、それほど単純ではありません。

このルールは DRY 原則を誤解しています。DRY の目標は、プロジェクト内で唯一の真実の情報源を維持することです。これは、完全に繰り返すのではなく、同じことを繰り返さないことを意味します。

同じステートメントを 50 回手書きすると、同じことを繰り返すことになり、DRY 原則に準拠しません。プログラムを使用して 50 回生成し、それを繰り返し書かない場合、これは DRY 原則に沿っています。プログラムによって重複コンテンツを生成するだけで、自分自身を複製するわけではありません。これは微妙ですが重要な違いです。コンパイル時の重複は悪いことではなく、ソースでの重複は悪いことです。

单一真是数据源的意思是，把重复使用的数据源保存到一个地方，不用复制就可以回收和再利用。当然了，系统可能帮助我们重复了，但是它的来源只有一个。这意味着我们可以只修改一次，变化就自动同步到所有地方；我们的源代码没有重复，是唯一的真实数据源，这就是DRY的原则。

考虑到这一点，我们就可以想到，没有参数的 mixin 也可以非常有用。来重新看一下 %brand-font{} 这个例子。

假设有些地方必须用特定的字体和加粗：

.foo {font-family: webfont, sans-serif;font-weight: 700;}....bar {font-family: webfont, sans-serif;font-weight: 700;}....baz {font-family: webfont, sans-serif;font-weight: 700;}

加粗的700不是常用的 regular 或 bold ，在代码中一遍又一遍的手写这两句声明很繁琐乏味。如果我们需要修改字体或者加粗，就需要搜遍整个项目，在每个地方都修改。

前面已经介绍了这种情况不应该用 @extend，可能我们应该做的是用 mixin：

@mixin webfont() {font-family: webfont, sans-serif;font-weight: 700;}....foo {@include webfont();}....bar {@include webfont();}....baz {@include webfont();}

是的，这里会产生重复，但是我们没有重复自己。这点很重要，这些规则之间没有逻辑关系，不应当产生关联。他们没有任何关系，只是碰巧都使用了同一段规则。所以这里的重复很合理。我们希望把这些声明用在 n 个地方，所以他们出现在了 n 个地方，也符合预期 。

无参数的 mixin 非常适合重复的吐出同一段规则，同时保持单一真实数据源。 这里 sass 就像在自动从剪贴板拷贝/粘贴一样。我们有单一真实数据源，我们可以只修改一次，处处生效，非常DRY。（这里提醒一下，Gzip更适合重复的内容，所以轻微增加文件大小的缺点完全可以忽略）

当然，带参数的 mixin 非常适合生成值不固定的结构。这种用法既DRY，又保持单一真实数据源，还能自动生成，举例：

@mixin truncate($width: 100%) {width: $width;max-width: 100%;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.foo {@include truncate(100px);}

生成相同的声明，但是宽度值不同，正是 mixin 的典型用法。这是最常见，也是广泛推荐的 mixin 用法。在这点上我们意见都一致。

总结

当你想 DRY 的地方真正有继承关系，或者在主题上相关的时候，才用 @extend。不要强行把代码放到一起，这样会让代码分组不合理，源码顺序也会被打乱。

需要给相同的结构设置不同的值，或者想让 sass 代替你复制、粘贴的时候使用 mixin，这样写仍然会保持单一真实数据源。

总结的总结

@extend 有理由才用，mixin 喜欢就用。（Use @extend for same-for-a-reason; use a mixin for same-just-because.）

参考资料：

Extend 尽量用占位符 http://csswizardry.com/2014/01/extending-silent-classes-in-sass/

IE 4095 选择器 bug http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx

CSS 优先级图示 http://csswizardry.com/2014/10/the-specificity-graph/

单一真实数据源 https://en.wikipedia.org/wiki/Single_source_of_truth

tl:dr Too long; didn’t read. https://en.wiktionary.org/wiki/TL;DR