@ Sass

@import:Sassファイルのインポート

@importの概要

基本的な @import の書き方は CSS と同じですが、Sass 独自の @import とパーシャル(partial)と言う機能を組み合わせることで、複数の Sass ファイルを1つの CSS に出力するなど、便利な機能がいくつかあります。

Sass独自の@import

Sass ファイルも、CSS と同じようにインポートすることができます。

styles.scss

@import url("main.scss");
@import url(main.scss);
@import "main.scss";
@import 'main.scss';

Sassファイルの分割

1ファイルで全てのスタイルを書いていくと膨大な記述になり、可読性が悪くなります。なので、一定のルールでファイルを分割して開発すると変更・修正がしやすくなります。

複数のファイルに分割することをパーシャル(partial)と言い、パーシャル化するファイルのファイル名の最初に_(アンダースコア)を付けます。パーシャルはコンパイルしても CSS ファイルが生成されないため、CSS ファイルとして変換したい scss ファイルに @import で読み込みます。

パーシャルファイルの@importの指定

_(アンダースコア)から始まるパーシャルファイルをインポートするには、_(アンダースコア)を省略してもインポートできます。また、拡張子(.scss)も省略することが可能です。なお、パーシャルファイルでなくとも、Sass ファイルであれば同様に拡張子は省略できます。

_module.scss

.item {
  margin: 10px;
  padding: 10px;
}

styles.scss

@charset "utf-8";
// _ を省略してインポート
@import "module.scss";
// _ と拡張子を省略してインポート
@import "module";

@importのネスト

Sass の @import は、次のようにルールセット内でも使うことができます。

old.scss

.item {
  margin: 10px;
}
p {
  margin: 0 0 10px;
}

styles.scss

.oldArea {
  @import "old";
}
p {
  margin-top: 1.5em;
}

コンパイル後の CSS は次のようになります。

styles.css


.oldArea .item {
  margin: 10px;
}
.oldArea p {
  margin: 0 0 10px;
}
p {
  margin-top: 1.5em;
}