きまぐれ引きこもりんご80%

【第7回】Sassってみよう!〜@import編〜

web制作

Sassってみよう!〜@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.scss」ファイルなどを修正、保存しても「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ファイルが生成されず、不要なファイルが作成さないという点だけ頭の片隅においていただければと思います。