Sassってみよう!〜@import編〜

@import編

cssでもお馴染みの@importですが、Sassでは少しだけ使い方が異なります。

cssの場合、@importで指定したcssファイルはあくまで外部ファイルとしてリンクされたカタチで読み込まれますが、
Sassの場合は、@importで指定したscssファイルはコンパイルするとひとつのcssファイルとして書き出されます。

cssの@importは外部ファイルのリンクにより、余計なHTTPリクエストが発生するので、あまり推奨されていません。
一方、Sassの@importには、ワンファイルに書き出すことによってHTTPリクエストを発生させずにscssファイルの分割管理を可能にするというメリットがありますので是非活用してみましょう。

ちなみにSassの分割機能を「partial(パーシャル)」といいます。

@importの使い方

では早速、基本的な使い方ですが、
メインの「style.scss」の他に、
リセットcssが記述してある「reset」ファイルと
変数やmixinなどをまとめた「settings」ファイル、
メディアクエリを記述した「mediaqueries」ファイルに分割された例をみてみましょう。

まず、読み込む各ファイル名の頭に「_(アンダースコア)」をつけます。

scssをまとめた「scssディレクトリ」の中には
「style.scss」
「_reset.scss」
「_settings.scss」
「_mediaqueries.scss」

の4ファイルがある状態になりました。

では「style.scss」に、他の3ファイルをimportしてみましょう。
と言っても簡単で、cssの@importと使い方は変わりません。
@importの後に「” “(ダブルクォーテーション)」か「’ ‘(シングルクォーテーション)」囲みでインポートするscssファイルを指定するだけです。「_(アンダースコア)」と拡張子は省略することができます

style.scss

@charset “utf-8”;

@import “settings”;
@import “reset”;

// cssの記述

@import “mediaqueries”;

これをコンパイルすると「reset」「settings」「mediaqueries」の内容が1つのファイルにまとめられた「style.css」が作成されます。

ちなみに、複数ファイルの場合、「,(カンマ)」区切りで下記のように記述することも可能です。

@import "reset", "settings", "mediaqueries";

パーシャルファイルのコンパイル

コンパイルする時にsassコマンドのwatchオプションを使用することが多いと思いますが、フォルダ単位で監視すると、メインファイル以外の「reset」ファイルなどを修正、保存しても「style.css」を自動更新してくれるので便利です。

sass --style expanded --watch scss:css

パーシャルファイルの注意点

ただし、少しだけ注意したい点があります。
「reset.scss」
「settings.scss」
「mediaqueries.scss」
のように「_(アンダースコア)」のないファイルに対しては、

@import "settings";
@import "reset";
@import "mediaqueries";

上記のように@importすると「style.css」の他に、「settings.css」「reset.css」「mediaqueries.css」というふうに、それぞれのcssファイルまで生成されてしまいます。
「style.css」だけが欲しいわけですから、この場合、その他3つのcssファイルは不要ですよね。

このようにパーシャルは@importするscssファイル名に「_(アンダースコア)」を付けることによってcssファイルが生成されず、不要なファイルが作成さないという点だけ頭の片隅においていただければと思います。

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編 【第9回】@each @if @function編

SNSでもご購読できます。