ケース3：複雑なセレクターを拡張

<span><span>.breakfast</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span>background-color: yellow;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span>background-color: orange;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}</span>

<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

このようにhtmlで使用できる

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

<span><span><span><div</span> class<span>="candy strawberry-candy"</span>></span>
</span>  This is the strawberry candy!
<span><span><span></div</span>></span></span>

@extend

@extendを介して継承のいくつかの利點(diǎn)を見ることができます。これらには次のものが含まれます

クリーナーhtmlクラス

私の観點(diǎn)からは、優(yōu)れた製品を作るとき、エンドユーザーの視點(diǎn)だけでなく、開発戦略の質(zhì)も考慮しています。したがって、@extendは、各HTML要素內(nèi)でよりクリーンな方法でクラスを構(gòu)成するのに役立ちます。 CSSの重複の減少

時(shí)間と労力を節(jié)約します

開発者はさまざまな要素のCSSを再利用でき、CSSの問(wèn)題の根本原因を見つけるために必要な努力を減らし、CSS構(gòu)造を素晴らしくクリーンにすることができます。 ただし、 @Extendを使用することには危険がないわけではありません。上記の利點(diǎn)は、@extendが慎重に使用されている場(chǎng)合にのみ適用されます。逆の効果を引き起こす可能性があります。

の危険

例：

この例では、.base-cssは、それに基づいた多くの継承クラスを持つクラスです。この例を見ると、継承されたクラスが互いに関係していないことがわかります。ボタン用の.btnとフッター用のフッターがあります。 .base-cssから100のクラスが継承されている場(chǎng)合、.base-css特性を持つセレクターが増加します。これは、CSSの最終結(jié)果を大幅に不必要に複雑にします。さらに、これにより、各セレクターのプロパティを確認(rèn)することがより困難になります。

<span><span>@extend .class-name;</span></span>

上記の例がはるかに正確で合理的であることがわかります。オブジェクトの種類のバリエーションであるために互いに継承すべきクラスにのみ @Extendを適用することにより、スコープを削減しました。たとえば、上記のスタイルはすべて、さまざまな種類のボタンに関連しています。