Sassの勉強 #05 Sassの基本的な機能「@import」

Sassの勉強 #05　Sassの基本的な機能「@import」

2015年1月29日 09:01

CSSの@importと、Sassの@import

基本的な@importの書き方はCSSと同じですが、条件によってCSSの@importとしてインポートするか、Sassの@importとしてインポートするかが決まる。どっちの@importとしてインポートされたかによって違いがあります。

CSSの@importの使い方等詳しい説明は省きますが、上に書いた「CSSファイルとしてインポートされる」条件は下記の4つ。CSSの@importとして読み込みたい場合は下記4つのどれかに該当させればよい、と。

ファイルの拡張子が.cssである場合。
ファイル名がhttp://から始まる場合。
もしファイル名がurl()で指定されている場合。
@importにメディアクエリが指定されている場合。

この4つ以外の場合、Sassの@import機能としてインポートします。

Sass独自の@import

CSSの@importとして読み込まれた場合はいつも通りの@importなのですが、Sassの@importとして読み込まれた場合は次のような違いがあります。

Sassの@importとして読み込まれた場合は、ファイル内部に展開される。

ファイル内部に展開されるということで、Sassの@importとして読み込まれた場合、いくつファイルを読み込もうが、1つのCSSファイルとして生成される。モジュールとして複数のファイルにソースを分割して管理したい時とかにすごく良い。

パーシャル「_」を使って不要なCSSファイルを生成しないようにする

複数のSassのファイルをモジュールとして扱いそれらをインポートする際には、個々のSassファイルを個別にCSSにコンパイルする必要がない。そのための仕組みが「_ (アンダースコア) 」を使ったパーシャルという機能。ざっくり言うとそのscssファイルをインポート専用のファイルにする機能。

使い方は簡単。ファイル名の先頭に「_ (アンダースコア) 」を付けるだけ。後は一緒。

パーシャルを利用すると、ディレクトリ毎 –watch を使用して監視している場合にも、そのファイルは単独でコンパイルされない。これで不要なcssファイルを無駄に生成することはなくなる。

パーシャルファイルのインポートは「_ (アンダースコア) 」や拡張子を省略して書くことも可能。(別に「_ (アンダースコア) 」や拡張子をつけても特に問題はないのだけれども、「.scss」「.sass」と拡張子がついた同名ファイルを勝手に探してインポートしてくれる。)

例えばこんな感じ。「_reset.scss」を用意する。

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

それをメインのscssファイルで@importする。

// main.scss

@import "reset";

body{
  font:100% Helvetica, sans-serif;
  background:#efefef;
}

そうすると、コンパイル後のCSSファイルはこうなる。

// main.css

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background: #efefef;
}

「_reset.scss」についてはパーシャルファイルなので、CSSファイルは生成されない、とうまい具合に運用できる。

ファイルのどこからでもインポート出来る

CSSの@importは必ずファイルの先頭(@charsetがあればその直後)に書かないといけないというルールがありましたが、Sassではファイル内のどこからでも@importを使う事が可能。ファイルの末尾で印刷用のスタイルをインポートしちゃうとかいう例をどこかで見ましたが、使い勝手よさそう。

複数指定が一行でも可能

CSSの@importでは複数のファイルをインポートする際、必ず複数@importを指定しないといけませんでしたが、Sassの場合は1つの@importにカンマ区切りでの複数指定が可能。

@import "reset", "utility", "font/foo";

こんな感じで1行で済みます。数が増えてくると分かりにくいという場合等は、無理に1行に収めずに、CSSど同様に複数の@importを使用して1行に１ファイルずつインポートしても大丈夫。好みと使い分け。

@importのネスト

Sassの@importはルールセット内でも使用することが可能。例えば「_example.scss」というファイルを作っておいて、

// _example.scss

.example{
	color:red;
	font-weight:bold;
}

これをメインのscssファイルのルールセットの中で@import出来る。

// main.scss

#test{
  @import "example";
}

そうすると、コンパイル後のCSSファイルはこうなる。

// main.css

#test .example {
  color: red;
  font-weight: bold;
}

セレクタの中で使うと、インポートしたファイルの中身がセレクタにネストした状態で出力されているのが分かる。

その他

@importに対してインターポレーション「#{}」も使える。必要な時が来たら使う。←まだ使いどころはよく分かっていない。

Sassの勉強　関連記事

投稿日：2015年1月29日 09:01

カテゴリ：: Sass
タグ：: css, Sass

このページの一番上へ

コメントを残すコメントをキャンセル