279
261

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Rails での適切な Sass の構成手法について(翻訳)

Last updated at Posted at 2014-08-06

Sass のディレクトリ構成やファイル管理の仕方は、プログラムを管理しやすくする上でとても重要だと思いますが、まだまだ日本語での記事はあまり見かけません。

そこで、海外サイトで素晴らしい記事(Q&Aでのコメント)を見つけましたので、御本人の許可をいただいて和訳させていただきました。

Sass ファイル読み込みの際のかなり基本的な部分についての解説ですが、とても丁寧にアドバイスされており、CSS/Sass 初心者にもわかりやすい内容だと思います。

2012年2月12日付で、Stack Overflow 上で回答された文章を翻訳したものです

Rails での Sass のコンパイルはどうなっているの?

Stack Overflow で、以下の質問が掲載されていました。

(質問の概要をざっくりまとめると)

:question: 『Rails の stylesheets の読み込み順についてよくわかりません。
思った通りにコンパイルできないのですが、どうしたらエラーを解決できますか。』

こちらの質問に対しての、Benjamin 氏による回答を翻訳してまとめさせていただきました。
(読みやすいように、小見出しは、私の言葉でつけさせていただきました)


元記事はこちらです。 :arrow_down:

:link: 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 ファイルはこのようになります:

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 ファイルはこのようになります:

application.scss
@import "bootstrap/bootstrap.scss";

読み込みの順番を指定したおかげで、やっと、 @import "variables.scss"; で読み込まれた変数を、その後で読み込まれた他の .scss ファイルの中で使うことができます。

つまり、bootstrap フォルダの type.scss の中だけでなく、 あなたの作成した my_model.css.scss の中でも変数を使うことができるということです。

partials と modules ディレクトリ

次に、partialsmodules という名前のフォルダを作ります。
これが他のほとんどのファイルの置き場所になります。

そして、このように application.scss ファイルに import を追記することができます。

application.scss
@import "bootstrap/bootstrap.scss";
@import "partials/*";

では、あなたのホームページの記事のスタイル用に少しだけ CSS を作ってみましょう。

partials/_article.scss というファイルを作るだけで、コンパイルされた application.css の中に自動的に加わるでしょう。

読み込み順のおかげで、あなた自身の scss ファイルの中で、bootstrap のミックスインと変数も使うことができます。

今のところわかっているこのメソッドの唯一の欠点は、Rails がいつも再コンパイルしてくれるわけではないため、時々あなたが partial/*.scss ファイルを強制的に再コンパイルしてあげないといけないことです。

補足

*1) 記事内にある『Euruko2012 での Roy Tomeji によるプレゼン』の URL はこちらです。

:link: Modular & reusable front-end code with HTML5, Sass and CoffeeScript - Lanyrd | Euruko 2012

著者プロフィール

:link: Stack Overflow | Benjamin Udink ten Cate

279
261
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
279
261

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?