Edited at

Sassを使ってビューごとにスタイルを適用させる方法


はじめに

こんにちは!#teamサイゼリヤアドベントカレンダー4日目のテッシです。

1年半前から大変お世話になっているぶっちー(@yoshixj)と実際にサイゼリヤに行ったことがあるため今回の#teamサイゼリヤに参加させていただきましたw

今回はRailsで、Sassを使ってビューごとにスタイルを適用させる方法について書きたいと思います。


スタイルシートの読み込み

Railsではデフォルトでapp/assets/stylesheets/application.cssというファイルが存在し、以下のような内容になっていると思います。


app/assets/stylesheets/application.css

/*

* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/


この中に*= require_tree .という記述があり、これによってapp/assets/stylesheets以下のすべての階層のスタイルシートが読み込まれます。

そのため、ビューごとにスタイルを適用したい場合でもapp/assets/stylesheets以下のスタイルシートがすべてのビューに適応されてしまい、思わぬレイアウトの崩れが生じることがあります。


Sassの特徴を使う

Sassではネスト(入れ子構造)が使えます。

cssで書くと以下のようになりますが、


css

ul {

margin: 0;
}
ul li{
margin: 10px;
}
ul li a{
color: #333;
}

Sassを使えば以下のようにネスト(入れ子構造)で書けます。


scss

ul {

margin: 0;
li {
margin: 10px;
a {
color: #333;
}
}
}

今回はこのSassのネスト(入れ子構造)を使ってapp/assets/stylesheets以下のスタイルシートがすべてのビューに適応されてしまう問題を解決します。


解決方法

例えば、app/views/top/indexのページにスタイルを当てる場合は、app/assets/stylesheets/top/ ディレクトリを作成し、index.scssファイルを作成し、以下のように記述します。


app/assets/stylesheets/top/index.scss

.top-index {

// このブロックの中にスタイルを書いていく
ul {
list-style: none;
}
}

top-indexというクラス名は自由に設定していいですが、上記の例のようにcontroller名-action名をクラス名に使うと対応が分かりやすいかもしれません。

次に、erbファイルの一番親の要素に以下のようにクラス名を当てます。


app/views/top/index.html.erb

<div class="top-index">

<!-- このブロックの中にコードを書いていく -->
<ul>
<li>テッシ</li>
<li>スアレス</li>
<li>ネイマール</li>
</ul>
</div>

このようにtop-indexというクラス名を一番親の要素に当てることで、スタイルシートの.top-indexで囲われたブロック内のスタイルのみが適用され、ビューごとにスタイルを当てることが可能になり、思わぬレイアウトの崩れを防ぐことができます。


最後に

今回はSassの特徴を利用してビューごとにスタイルを適用できるようにする方法を書きましたが、他にもerbファイルに、読み込むスタイルシートを指定する方法などもあると思います。

少しでも参考になれば幸いです。最後まで読んでくださりありがとうございます!