CSSの@importルールの使用方法

CSSの@importルールの使用方法を学ぶ スタイルシートをインポートします。

CSS @import at-ruleを使用すると、CSSスタイルシートを他のCSSスタイルシートにインポートできます。コードベースが大きく成長しているウェブサイトには実用的です。

基本的な使用法：

@import url(variables.css);

この方法では、すべてのスタイルを1つの大きなスタイルシートに保持するのではなく、CSSスタイルを変数、タイポグラフィ、色、間隔などの個々のファイルに分割できます。

次に、個々のCSSファイルをすべてメインのCSSスタイルシートにインポートして、それらをすべて一緒に追加できます。

/* Your main.css CSS file */
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

これは、コードベースが時間の経過とともに大きくなるにつれて、すべてをクリーンに整理するための実用的な方法です。

@importを使用する場合に重要

@importを使用するときに知っておくべき最も重要なこと @importを配置する必要があるということです メインの最上部にあるステートメント CSSファイル（すべてのCSSファイルをインポートするファイル）。

例：

/* 
Your main.css CSS file 
Don’t add CSS above your import statements! 
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
You can add CSS below
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

@importの上に（メインのCSSファイルに）CSSスタイルを配置した場合 ステートメント、それは無視されます。

メディアクエリでの@importの使用

@importを使用することもできます CSSスタイルシートを条件付きでインポートするステートメント。たとえば、スマートフォンなどの小さな画面にのみロードする必要がある特定のスタイルシートがある場合は、メディアクエリを@importに添付することでそれを制御します。 ステートメント：

@import "mobile.css" screen and (max-width: 768px);

上記の例では、mobile.css スタイルシートは、最大幅が768ピクセルの画面でのみ有効になります。