SASS でのファイル分割-CSSチュートリアル-php.cn

SASS でのファイル分割

PHPz

リリース： 2023-09-01 14:29:02

転載

777 人が閲覧しました

SASS 中的文件分割

SASS は CSS プリプロセッサであり、Syntactical Awesome Style Sheet の略です。SASS コードはスクリプト言語と同じように記述されます。 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 ドキュメントにリンクします。

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