別のSASSファイルの読み込み

別のSASSファイルの読み込みを行うには、@importルールを使用します。

ファイル名の指定は、拡張子を省略することができます。
また、カンマ区切りで指定することで1度に複数のファイルを読み込むことができます。

複数のSASSファイルを読み込んでいる場合、コンパイルするとそれぞれのファイルが生成されます。
必要のないSASSファイルをコンパイル時に生成させたくない場合は、アンダースコアを先頭に付けることで生成されなくなります。
なお、@importで指定するファイル名にはアンダースコアを省略することができます。

構文

							単数:
							@import "ファイル名";
							複数:
							@import "ファイル名", "ファイル名"...;
						

サンプルコード

SCSS

/* 拡張子あり */
@import "foo.scss";
/* 拡張子なし */
@import "bar";

CSSの読み込みで@importをSASS内で使用する場合

CSSの読み込みで@importをSASS内で使用する場合は、拡張子を省略せずに指定することで@importをコンパイル後でも使用することができます。

SCSS

// SASS
@import "sample";
 
// CSS
@import "common/css/common.css";

コンパイル後:CSS

@import "common/css/common.css";

SASS・SCSS逆引きリファレンス一覧へ戻る