Sassパーシャルをapplication.scssで@importする順番

プログラミング

 

Railsでチャットアプリを作っていて、まず手始めにSassで見た目を作っていました。

その時にパーシャルをいろいろ作ってたらハマってものすごい時間を食ったので、こんなしょうもないハマり方を今後一切人類が繰り返さないようにここに記します。

 

パーシャルとは 

振り返りも兼ねてほんの少しだけ丁寧めに書くので、理解している方は飛ばしてください。

 

CSSでは下記のようなページを構成するそれぞれのパーツをパーシャルと呼ばれるCSSファイルに分割します。

  • ヘッダー
  • サイドバー
  • メインコンテンツ
  • フォッター

理由はメンテナンスしやすいことと、可読性を良くするためです。

一つのCSSファイルになんでも詰め込んでしまうとどうしても長くなってしまいますし、どこがHTML内のどの要素を指しているのかわかりづらくなります。

 

Sassとは

SassとはCSSをもっと便利にしたものです。主に二つ、大きな特徴があります。

  • 変数
  • Mixin

 

変数

変数の概念はRubyと同じく、何か値を入れる箱のようなものですね。例えばRubyだとこんなんです。

 

name = "Kosaburo"

 

これと全く同じことがCSSでできるんです！

例えばこういうCSSファイルがあったとします。人間のリスト（human_list）と日本人のリスト（japanese_list）があり、どちらも文字の色（color）にはblueが使われてますね。

 

.human_list {

 font-size: 20px;

 color: blue;

}



.japanese_list {

 font-size: 20px;

 color: blue;

}

 

これくらいのサイズならいいんですが、これがamerican_listとかchinese_listとか国ごとに増えていくとすると、毎回同じblueを指定するのは大変です。

それに後から文字色をgreenに変えようと思ったら、全部変更しなきゃいけません。

そこでSassの変数を使い、こんな風に書くと便利です。

 

$name_color = blue;



.human_list {

 font-size: 20px;

 color: $name_color;

}



.japanese_list {

 font-size: 20px;

 color: $name_color;

}

 

これであれば色の変更があっても、変数を変更すれば一発で全部適応されますね。

 

Mixin

これは個人的には変数を進化させたもののような印象があるんですが…どうなんですかね。Mixinを使えば上のコードがなんとこうなります。

 

@mixin human_style() {

 font-size: 20px;

 color: blue;

}



.human_list {

 @include human_style();

}



.japanese_list {

 @include human_style();

}



.american_list {

 @include human_style();

}

 

いちいち要素ごとにスタイルを指定する必要はなく、一緒にスタイルであれば全部まとめて最初に定義しちゃいます。それを使い回せばほらスッキリです。

 

そしてこの変数とMixinをまとめたものを「_variables.scss」というパーシャルに切り出して保存します。

 

 パーシャルを呼び出す

準備は整ったので、「application.scss」から「_variables.scss」を呼び出しましょう。下記のように「application.scss」に記載します。

 

@import "./reset";

@import "font-awesome";

@import "main_wrapper";

@import "side_bar";

@import "main_content";

@import "variables";

 

これで完成！

 

全然ダメ

全然完成じゃありませんでした。いろんな変数が定義されてないっぽくレイアウトが激崩れを起こしていたのですが、スペルミスもないしなんでダメなのかしばらくハマりました。

 

そうなんです！原因は「application.scss」で@importする順番だったのです。

変数を定義する「_variables.scss」を他CSSファイルよりも後に読み込んでいたのでうまくいかなかったようです。他CSSは「_variables.scss」の中の変数を使うように設計されているので、先に読み込む必要があります。

 

変数を使う前に先に定義するぐらいわかってたつもりだったんですが…慣れてないものがいくつか重なるとこういうことが起こりますね。

 

頑張ります。