SASSの@Extendを介した継承の利点-CSSチュートリアル-php.cn

SASSの@Extendを介した継承の利点

キーテイクアウト

SASSの@ExtEnd機能により、クラスはプロパティを互いに共有し、CSSスタイルシートの組織を簡素化し、大規模なWebサイトを効果的にスタイリングできるようにすることができます。
SASSは、CSSの貴重な拡張機能であり、よりクリーンで十分に構造化され、開発と保守が容易になります。以前に試したことがない人にはお勧めしますが、潜在的な落とし穴を避けるために慎重に使用する必要があります。
まだSASSを探索していない人にとっては、CSSの延長です。式、変数、ネスト、ミキシン（機能のSASSの名前）、継承などのネイティブCSSには存在しない機能を提供します。この記事では、 @Extendを使用してSASSの継承の概要を説明します。この機能がもたらす利点と、自分のプロジェクトでそれを使用するときの私の経験をカバーします。 @extendは悪用される可能性があることに注意することが重要です。HugoGiraudelはSitePointで、Sass @extendを避けるべき理由についても書いています。したがって、@extendは論争のある主題になる可能性があることに注意してください。 Atozを見る：Sass 手紙でサスの手紙を学びます
次の例では、SCSS構文を使用します。これは、SASSの追加機能を備えたCSSのすべての機能と構造を含む構文です。

@extendは、クラスが互いに一連のプロパティを共有できるようにするSASSの機能です。 SASSのクラスを伸ばすセレクターは、セレクターが拡張されているクラスのすぐ隣に含まれているため、コンマ分離リストになります。

その構文はそうです：

使用法

@extendを使用すると、次のようになります：

これは次のようにコンパイルされています

上記の例では、次の機能を備えた.fooと.barを定義しました。

.barは.fooから継承し、親クラスのすべてのプロパティを含む.foo。
.barは、プロパティバックグラウンドカラーを追加して.fooを拡張します

基本を知って、@extendのいくつかのユースケースを見ていきます。

@extend

を使用しています

ユースケース1：複製

クラス間のプロパティの重複は、CSSをまとめるときに回避するのが困難です。これにより、スタイルシートがより複雑になります。たとえば、

上記の例でわかるように、。ブレイクファースト、.Lunch、および.Dinnerには、同じ値のプロパティカラー、ボーダー、ボックスシャドウ、マージン、パディングが含まれています。これらのプロパティは複製されているため、コードが乱雑に見えるため、@extendで書き直しましょう。

上記の書き換えられたCSSでは、SASSを使用することで、マークアップがCSSだけよりもクリーンになるのに役立つことがわかります。

codepenのSitePoint（@sitepoint）によるSCSSのプロパティのペンの複製を参照してください。

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

ログイン後にコピー

ケース2：HTML

から複数のクラスを移動します

あるクラスが別のクラスのすべてのスタイルを持っている必要がある場合、ページを設計する場合、多くの場合があります。 HTMLで複数のクラス名を使用することにより、このケースをよく処理します。

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

ログイン後にコピー

私たちのcssはそうするでしょう：

そのcssのhtml：

上記の例では、

に2つのクラスがあります。いくつかのクラスがあった場合、これがどれほど厄介であるか想像してみてください：

上記のHTMLコードは非常に複雑になる可能性があります。一部のWeb開発者はこの方法でそれを好みますが、私は私のSASSスタイルでの継承を好みます：

私たちのHTMLが今のように見えます：

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

ログイン後にコピー

今回は1つのクラスのみが必要です。クラス用に定義されているすべてのスタイルは、クラス.Strawberry-Candyにも適用されます。これで、HTMLコードはクリーナーになりました。 codepenで@extend（@sitepoint）で@extendを使用してHTMLから複数のクラスを移動するペンを参照してください。

ケース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>

ログイン後にコピー

クラスセレクターは、拡張できる唯一のものではありません。また、複雑なセレクターを、A：Hover、.ParentClass.Childclassなど、単一の要素に拡張することもできます。たとえば、

<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>

ログイン後にコピー

codepenで@extend（@sitepoint）で@extendを使用して複雑なセレクターを拡張するペンを参照してください。

@extend

の利点上記の例を歩いている

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

クリーナーhtmlクラス

2番目のケーススタディでわかるように、1つの要素で非常に多くのクラスを使用すると、問題が発生した場合に根本原因を判断することが難しくなる場合があります。 HTMLタグの構造もあまり見栄えが良くてきれいではありません。

私の観点からは、優れた製品を作るとき、エンドユーザーの視点だけでなく、開発戦略の質も考慮しています。したがって、@extendは、各HTML要素内でよりクリーンな方法でクラスを構成するのに役立ちます。 CSSの重複の減少

Web開発では、CSSスタイル内に常に複製があります。したがって、書かれたCSSソースコードを再利用することは非常に必要です。 @Extendは、CSSが適切でクリーンである場合に再利用するのに役立ちます。

時間と労力を節約します

前述の2つの利点により、開発者は開発中に時間と労力を節約できます。

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

@extend

の危険

自分のプロジェクトで@extendを適用しましたが、@extendを使用する際には注意の言葉を提供する必要があります。注意する必要があります。

@extendは、CSSファイルのサイズを大幅に増やし、注意せずに使用するとCSSのパフォーマンスに影響を与える可能性があります。私はこのような状況で痛みの割合を持っていて、@ExtEndのSASSの使用に多くの時間を費やしました。 @extendを最初に使用した方法の例は次のとおりです。

例：

は次のようにコンパイルされています

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

SASSを再除去した後、継承されたクラスが継承しているオブジェクトに直接関係している場合にのみ @Extendを使用する必要があることに気付きました。多くの無関係な要素のブランケットルールではなく、オブジェクトまたはスタイルのバリエーションである必要があります。上記の私の例のような継承については、CSSの既存の機能に頼って、スタイルを子供の要素にカスケードする必要があります。

は次のようにコンパイルされています

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

ログイン後にコピー

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

結論

SASSは、CSSを改善して、よりクリーンで、十分に構造化され、整理され、開発と保守を簡単にすることができる貴重な拡張機能です。以前にSASSを試したことがない場合は、強くお勧めします。 SASSの基本にもっと慣れているときは、Sassの @Extendについて誰もあなたに言ったことに関するHugo GiraudelのSitePointの記事を読むことをお勧めします。また、SitePointのSASSリファレンスにSASSリファレンスガイド全体があり、探索する例がたくさんあります。

この投稿の最初のバージョンでエラーを受け取ってくれたコメントで、スティーブとエゼキエルに感謝します。その後、更新されました。はい、sassのネストされたルール内で@extendを使用できます。ただし、拡張セレクターは、ネストされたルール内ではなく、スタイルシートの上部レベルに挿入されることに注意することが重要です。これは、SASSがすべてのセレクターがドキュメントのトップレベルにある必要があるというCSSルールに従っているためです。 🎜>このエラーは、SASSのルールセットの外部で@extendを使用しようとすると発生します。このエラーを回避するには、ルールセット内で@extendを使用していることを確認してください。たとえば、「@extend .class;」を書く代わりに、「.new-class {@extend .class; }”。

sassの擬似クラスで@extendを使用できますか？ただし、 @Extendは、擬似クラス自体ではなく、擬似クラスのスタイルのみを拡張することに注意することが重要です。これは、「@extend：hover;」を使用する場合、セレクターにホバーエフェクトを追加するのではなく、代わりに次のスタイルを拡張することを意味します。 SASSで動作していませんか？

@extendがSASSで機能していない理由がいくつかあります。一般的な理由の1つは、拡張しようとしているセレクターが同じファイルに存在しないことです。もう1つの理由は、SASSでは許可されていないメディアクエリまたはネストされたルール内でセレクターを拡張しようとしていることです。 @ExtEndが機能していない場合は、これらのポイントを確認してください。

sassで複数のクラスで@extendを使用できますか？これは、クラスをコンマで分離することで行うことができます。たとえば、「.new-class {@extend .class1、.class2; }”は.class1と.class2の両方のスタイルを拡張します。 SASSの拡張クラス。 @extendディレクティブの後に新しいスタイルを定義することで、これを行うことができます。新しいスタイルは、@extendを使用しているセレクターの拡張クラスのスタイルをオーバーライドします。

以上がSASSの@Extendを介した継承の利点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。