はじめに
こんにちは！#teamサイゼリヤアドベントカレンダー4日目のテッシです。
1年半前から大変お世話になっているぶっちー(@yoshixj)と実際にサイゼリヤに行ったことがあるため今回の#teamサイゼリヤに参加させていただきましたw
今回はRailsで、Sassを使ってビューごとにスタイルを適用させる方法について書きたいと思います。
#スタイルシートの読み込み
Railsではデフォルトで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で書くと以下のようになりますが、
ul {
margin: 0;
}
ul li{
margin: 10px;
}
ul li a{
color: #333;
}
Sassを使えば以下のようにネスト(入れ子構造)で書けます。
ul {
margin: 0;
li {
margin: 10px;
a {
color: #333;
}
}
}
今回はこのSassのネスト(入れ子構造)を使ってapp/assets/stylesheets以下のスタイルシートがすべてのビューに適応されてしまう問題を解決します。
解決方法
例えば、app/views/top/indexのページにスタイルを当てる場合は、app/assets/stylesheets/top/ ディレクトリを作成し、index.scssファイルを作成し、以下のように記述します。
.top-index {
// このブロックの中にスタイルを書いていく
ul {
list-style: none;
}
}
top-indexというクラス名は自由に設定していいですが、上記の例のようにcontroller名-action名をクラス名に使うと対応が分かりやすいかもしれません。
次に、erbファイルの一番親の要素に以下のようにクラス名を当てます。
<div class="top-index">
<!-- このブロックの中にコードを書いていく -->
<ul>
<li>テッシ</li>
<li>スアレス</li>
<li>ネイマール</li>
</ul>
</div>
このようにtop-indexというクラス名を一番親の要素に当てることで、スタイルシートの.top-indexで囲われたブロック内のスタイルのみが適用され、ビューごとにスタイルを当てることが可能になり、思わぬレイアウトの崩れを防ぐことができます。
#最後に
今回はSassの特徴を利用してビューごとにスタイルを適用できるようにする方法を書きましたが、他にもerbファイルに、読み込むスタイルシートを指定する方法などもあると思います。
少しでも参考になれば幸いです。最後まで読んでくださりありがとうございます！