SASS の @extend ディレクティブとは何ですか?

SASS を使用すると、開発者はより読みやすいコードを作成し、より適切な方法で操作できるようになります。これには、開発者が通常の CSS よりも優れたコードを記述できるようにする機能を提供する @media、@content、@include、@mixin、@extend などの複数のディレクティブが含まれています。

このチュートリアルでは、SASS の @ディレクティブについて学びます。 @extend ディレクティブを使用すると、開発者は CSS コードを拡張できます。ただし、ミックスインは CSS コードも拡張し、重複を回避します。 @extend ディレクティブを使用すると、コードの重複を避けることもできます。

たとえば、アプリケーションのフォントに共通の CSS があり、どこでも異なるフォント サイズが必要な場合は、フォント スタイルを拡張してカスタム フォント サイズを追加できます。これにより、重複したコードを記述する必要がなくなります。

さらに、開発者は @extend ディレクティブを使用して CSS に継承を実装できます。これについては例を通して学習します。

ユーザーは、次の構文に従って SASS で @extend ディレクティブを使用できます。

上記の構文では、「セレクター」の宣言部分に共通のCSSを記述できます。その後、「Another_CSS_Selector」内のセレクターを拡張し、独自のコードを追加できます。

例 1 (@extend ディレクティブの基本的な使用法)

以下の例では、「card」クラス名を持つ HTML 要素のスタイルをいくつか定義します。次に、「small_card」要素と「large_Card」要素の CSS を定義します。両方のセレクターで @extend ディレクティブを使用して、「カード」セレクターの CSS を拡張しました。さらに、幅、高さなどの追加の CSS を「small_card」セレクターと「large_card」セレクターに組み込みました。

以下の出力では、「card」セレクターのスタイルが「small_card」セレクターと「large_card」セレクターに適用されていることがわかります。追加の CSS も両方のセレクターに個別に適用されます。

例 2 (@extend ディレクティブを使用した継承チェーン)

次の例では、@extend ディレクティブを使用して継承チェーンを作成する方法を示します。ここでは、「.first」セレクター内に CSS を追加しました。その後、「.next」セレクター内の「.first」セレクターを拡張し、追加の CSS を追加しました。

次に、「.third」セレクター内の「.second」セレクターと、「.fourth」セレクター内の「.third」セレクターを展開します。そこで、ここではさまざまな CSS セレクターを使用して継承チェーンを作成しました。

以下の出力は、@extend ディレクティブを使用して継承チェーンを作成するときに、CSS コードがさまざまな CSS セレクターにどのように適用されるかを示しています。

例 3 (@extend ディレクティブを使用した多重継承)

この例では、@extend ディレクティブを使用して多重継承を使用する方法を示します。多重継承とは、単一のセレクターが複数のセレクターを拡張することを意味します。

ここでは、「.container」と「.main」の CSS セレクターを定義し、いくつかの CSS を追加しました。その後、「.element」CSS セレクター内で、「.container」セレクターと「.main」セレクターを拡張します。

例 4 (@media ディレクティブ内で @extend ディレクティブを使用)

以下の例では、@media ディレクティブ内で @extend ディレクティブを使用します。ただし、SASS コンパイラーは、@media ディレクティブのセレクター内で @media ディレクティブの外側で定義されている CSS セレクターを拡張するたびにエラーをスローします。

ここでは、@media ディレクティブの「.small_button」CSS セレクターを「.button」CSS セレクターで拡張します。ユーザーは、ここで両方のセレクターが @media ディレクティブ内にあることを確認できます。

例 5 (プレースホルダー セレクター)

名前が示すように、セレクター名の前に (%) 記号を追加することで、プレースホルダー セレクターを作成できます。 SASS コードをコンパイルすると、プレースホルダー セレクターは出力コードに表示されませんが、展開の代わりにそのスタイルが追加されます。

たとえば、ここでは「%container」プレースホルダー セレクターを定義します。その後、「small_container」と「medium_container」内のコンテナセレクターを拡張しました。

出力では、「container」セレクターが含まれていないことがわかりますが、「small_container」と「large_container」には「container」プレースホルダー コードが含まれています。

ユーザーは、このチュートリアルで @extend ディレクティブの使用方法を学びました。基本的に、これを使用してスタイルシートを拡張し、コードの重複を避けることができます。さらに、@extend ディレクティブを使用して CSS で継承チェーンを作成できます。

以上がSASS の @extend ディレクティブとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。