SASS でのファイル分割

SASS は CSS プリプロセッサであり、Syntactical Awesome Style Sheet の略です。SA​​SS コードはスクリプト言語と同じように記述されます。 JavaScript と同様ですが、コンパイル時に CSS に変換され、ブラウザ内で CSS としてコンパイルされます。SASS は、どのバージョンの CSS でも使用できます。通常の CSS でのコードの記述方法を強化し、進化させるために使用されます。

通常のワークスペースでは、コード全体を別のファイルに記述することに慣れているため、他の開発者がコードを読んで理解することが難しくなります。 SASS を使用すると、ファイルを分割し、コードを複数のファイルに分けることができます。

ファイルを分割するプロセスには、1 つの大きなファイルを複数のサブファイルに分割し、それらを相互にリンクすることが含まれます。これは、SASS の以下のメソッドを使用することで簡単に行うことができます -

• @import とパーシャルを使用する

• @use とパーシャルを使用する

ここで、SASS で 1 つのファイルの複数のサブファイルをリンクするコード例を使用して、上記の方法を詳しく理解しましょう。

@import と部分ファイルを使用する

このメソッドでは、通常 CSS ファイルに記述するのと同じようにスタイルを記述します。ただし、他のすべてのファイルにインクルードまたはリンクするための @import ステートメントを含む共通のファイルが存在します。そして、そのファイル内のすべてのファイルのコードを取得します。

すべてのサブファイルがリンクされるか、共通ファイルに組み込まれた後、すべての SASS ファイルが存在する同じフォルダーで以下のコマンドを実行する必要があります −

リーリー

上記のコマンドは、共通 SASS ファイルのコード全体を最終出力ファイルにリンクまたは組み込みます。最終出力ファイルは、ページのスタイルを設定するために HTML ドキュメントにリンクされます。

コード例を通じて、上記のメソッドの実装について詳しく説明します -

＃＃＃ステップ＃＃＃

• ステップ 1

  -このステップでは、.scss 拡張子を持つ複数の SASS ファイルを作成します

• ステップ 2

  - 次に、前のステップで作成したすべての SASS ファイルの @import ステートメントを含む SASS ファイルを作成します。

• ステップ 3

  - 最後のステップでは、上記のコマンドを使用してパブリック ファイルを最終的な CSS ファイルに含めるかリンクし、それを HTML ドキュメントにリンクします。

説明

の中国語訳は次のとおりです:

説明

• ファイル 1

  - test.scss という名前のファイルを作成し、そのファイル内に SASS コードを追加します。

test.css −

リーリー

• ファイル 2

  -次に、common.scss. という名前のファイルを作成します。このファイルは、@import ステートメントを使用してすべてのサブファイルをリンクします。

common.scss −

リーリー

• ファイル 3

  -これは最後のファイル、final.css になります。このファイルにはすべての SASS コードが含まれており、HTML ドキュメントにリンクされます。

コマンド -

を実行します。 リーリー

final.css −

リーリー これで、

final.css

ファイルを HTML ドキュメントにリンクして、以下の例のように、すべての SASS ファイルの CSS を使用してページのスタイルを設定できます。 ＃＃＃例＃＃＃ 以下の例は、複数の SASS ファイルを作成してリンクし、ページのスタイルを設定する方法を示しています。 -

リーリー

上記の例では、最終的な Final.css ファイルを使用して、SASS ファイルのすべてのスタイルでドキュメントのスタイルを設定しました。

注

- 上記のコード例を実装するには、SASS がシステムにプリインストールされていることを確認してください。

@use と部分ファイルを使用する

@use

メソッドを使用したスタイルの埋め込みは、

@import

メソッドとほぼ同様です。ファイル名の前にアンダースコアを付けて、@use ステートメントを使用してインポートするだけです。これにより、SASS ファイルで定義された関数やミックスインにアクセスできるようになります。 説明の中国語訳は次のとおりです: 説明

ファイル 1 -ファイル 1 は、接頭辞としてアンダースコアを使用して定義された関数、ミックスイン、および単純な CSS スタイルを含む SASS ファイルになります。

_test.scss −

• リーリー

ファイル 2 -これは、@use ステートメントを使用してすべての SASS ファイルをリンクする共通ファイルになります。

• common.scss −

  リーリー

ファイル 3 -このファイルは最終的な CSS ファイルであり、すべての SASS ファイルのすべてのスタイルの最終バージョンです。

• コマンド -

  を実行します。 リーリー
final.css −

リーリー この方法では、ファイルを分割して SASS を実装し、最終的に出力される CSS ファイルを使用して HTML ドキュメントにスタイルを追加できます。

この記事では、分割された SASS ファイルを別のファイルにリンクまたは埋め込み、その最終的な CSS ファイルを使用して HTML ページにスタイルを追加する 2 つの方法を学びました。

以上がSASS でのファイル分割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。