Sass のディレクトリ構成やファイル管理の仕方は、プログラムを管理しやすくする上でとても重要だと思いますが、まだまだ日本語での記事はあまり見かけません。
そこで、海外サイトで素晴らしい記事(Q&Aでのコメント)を見つけましたので、御本人の許可をいただいて和訳させていただきました。
Sass ファイル読み込みの際のかなり基本的な部分についての解説ですが、とても丁寧にアドバイスされており、CSS/Sass 初心者にもわかりやすい内容だと思います。
2012年2月12日付で、Stack Overflow 上で回答された文章を翻訳したものです
Rails での Sass のコンパイルはどうなっているの?
Stack Overflow で、以下の質問が掲載されていました。
(質問の概要をざっくりまとめると)
『Rails の stylesheets の読み込み順についてよくわかりません。
思った通りにコンパイルできないのですが、どうしたらエラーを解決できますか。』
こちらの質問に対しての、Benjamin 氏による回答を翻訳してまとめさせていただきました。
(読みやすいように、小見出しは、私の言葉でつけさせていただきました)
元記事はこちらです。
Proper SCSS Asset Structure in Rails - Stack Overflow
answered Feb 12, 2012 at 8:38 | Benjamin Udink ten Cate
Benjamin 氏による回答(翻訳)
CSSによる今回の問題は、すべてのファイルが自動的に追加されてしまうのを避けたいということですね。
基本的には、スタイルシートはブラウザによって読み込まれて処理されたとおりの順番になります。
つまり、いつでも最終的にはすべての CSS を読み込むことになります。
CSS をランダムに読み込んでしまうと
例えば、各ブラウザ間による恐ろしい挙動の違いを防ぐために、デフォルトの見栄えを用意する normalize.css
シートを、あなたが持っていたとします。
ブラウザはこのファイルを最初に読み込むべきですね。
もし、このシートをあなたが読み込む CSS のどこかに、ただランダムに入れてしまったとしたら、
ブラウザのデフォルトスタイルだけでなく、先に読み込まれた全ての CSS ファイルの中に定義されたスタイルも上書きしてしまうでしょう。
これは、変数やミックスインについても同様です。
私は、Euruko2012 での Roy Tomeji によるプレゼン(*1)を見てから、管理するCSSが大量にあるときには、以下のアプローチをすることに決めました。
たくさんの CSS を管理するには
私は通例このアプローチを使います:
1. すべての .css ファイルを .scss に改名
2. application.scss からすべてのコンテンツを削除
application.scss
に @import 命令を加えることから始めましょう。
もしあなたが twitters bootstrap と自分のスタイルシートをいくつか使っているのでしたら、すでに bootstrap にスタイルリセット用のシートがあるので、先に bootstrap を読み込む必要があります。
ですので、@import "bootstrap/bootstrap.scss";
をあなたの application.scss
に加えてください。
bootstrap.scss
ファイルはこのようになります:
// CSS Reset
@import "reset.scss";
// Core
@import "variables.scss";
@import "mixins.scss";
// Grid system and page structure
@import "scaffolding.scss";
// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";
そして、application.scss
ファイルはこのようになります:
@import "bootstrap/bootstrap.scss";
読み込みの順番を指定したおかげで、やっと、 @import "variables.scss";
で読み込まれた変数を、その後で読み込まれた他の .scss
ファイルの中で使うことができます。
つまり、bootstrap フォルダの type.scss
の中だけでなく、 あなたの作成した my_model.css.scss
の中でも変数を使うことができるということです。
partials と modules ディレクトリ
次に、partials
と modules
という名前のフォルダを作ります。
これが他のほとんどのファイルの置き場所になります。
そして、このように application.scss
ファイルに import を追記することができます。
@import "bootstrap/bootstrap.scss";
@import "partials/*";
では、あなたのホームページの記事のスタイル用に少しだけ CSS を作ってみましょう。
partials/_article.scss
というファイルを作るだけで、コンパイルされた application.css
の中に自動的に加わるでしょう。
読み込み順のおかげで、あなた自身の scss ファイルの中で、bootstrap のミックスインと変数も使うことができます。
今のところわかっているこのメソッドの唯一の欠点は、Rails がいつも再コンパイルしてくれるわけではないため、時々あなたが partial/*.scss
ファイルを強制的に再コンパイルしてあげないといけないことです。
補足
*1) 記事内にある『Euruko2012 での Roy Tomeji によるプレゼン』の URL はこちらです。
Modular & reusable front-end code with HTML5, Sass and CoffeeScript - Lanyrd | Euruko 2012