Sass の別のファイルにクラスを継承する

SASS は、CSS コードをより適切に操作するために CSS 上に構築されたプリプロセッサです。これには、CSS コードの記述を容易にする複数のディレクティブとルールが含まれています。また、継承、if/else ステートメント、関数などの非常に便利な機能も含まれています。

SASS では、あるファイルを別のファイルにインポートし、あるファイルの内容を別のファイルで使用できます。また、複数のクラス間で継承を作成することもできます。 @extend ディレクティブを使用して、あるクラスを別のクラスに継承できます。 CSS で継承を使用すると、コードの再利用性を向上させることができます。

このチュートリアルでは、SASS の別のファイルからクラスを継承する方法を学びます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、SASS 内の別のファイルにクラスを継承できます。

リーリー

上記の構文では @import ルールを使用してファイルをインポートしました。その後、@extend ディレクティブを使用して、「element」クラスを「classname」クラスで拡張します。

例 1 (基本的なクラスの継承)

次の例では、基本的なクラスの継承を示します。ここでは、card.scss ファイルに、いくつかの CSS プロパティを持つ「card」クラスを追加しました。カードの作成に必要な基本的な CSS プロパティと値がすべて含まれていると言えます。

style.scss ファイルでは、@import ディレクティブを使用して Card.scss ファイルをインポートします。その後、「card-div」クラスと「card-container」クラスのスタイルを設定しました。同時に、@extend ルールを使用して、「card-div」クラスと「card-container」クラスを「card」クラスに継承しました。

出力では、継承されたクラスの結果を確認できます。さらに、ユーザーは以下の例でコードの再利用性を確認できます。

ファイル名 - Card.scss

リーリー

ファイル名 – style.scss

リーリー ＃＃＃出力＃＃＃ リーリー 例 2 (複数のクラスの継承)

次の例では、複数のクラスの継承を示します。 CSS プロパティを含むさまざまなクラスを「specs.scss」ファイルに追加しました。 style.scss ファイルに、「specs.scss」ファイルをインポートしました。さらに、@extend ディレクティブを使用して、「specs.scss」ファイルの 3 つのクラスすべてを「div」クラスに拡張しました。そこで、複数のクラスを別のファイルから 1 つのクラスに継承しました。

ファイル名 - spec.scss

リーリー

ファイル名 – style.scss

リーリー ＃＃＃出力＃＃＃ リーリー

例 3 (ネストされた継承) 次の例では、ネストされた継承を示します。 form.scss ファイルでは、2 つの異なるクラスを作成し、CSS プロパティを追加しました。

style.scss ファイルでは、「form-field」クラスを通じて「form-group」クラスを継承し、「form-input」クラスを追加しました。 「input-field」クラスは「form-input」クラスを継承します。そこで、ネストされた継承クラスを使用しました。

ファイル名 - form.scss

リーリー

ファイル名 – style.scss

リーリー ＃＃＃出力＃＃＃ リーリー ユーザーは、SASS 内であるファイルから別のファイルにクラスを継承する方法を学びました。ユーザーは、クラスを含むファイルをインポートし、@extend ディレクティブのクラス名を使用して、あるクラスから別のクラスに継承する必要があります。

以上がSass の別のファイルにクラスを継承するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。