Rails
Sass

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ファイルに、読み込むスタイルシートを指定する方法などもあると思います。
少しでも参考になれば幸いです。最後まで読んでくださりありがとうございます!