#はじめに
簡単そうで意外と面倒だったSassの使い方を備忘録として書いておきます。
※この記事は既にBootstrapが導入されていて、これからSassを使ってレイアウト編集することを想定しています。
Sassを使おうと思ったきっかけは現場で使える Ruby on Rails 5速習実践ガイドを使ってタスク管理アプリを作成中に細かいレイアウトを編集したいなと思ったのですが、参考書ではBootstrapだけを使った装飾しか使われていなかったためです。
そもそもSassって何？という人は以下のリンクを参照
これからはcssはSassで書こう。
Bootstrap 4を使うならSassを使って3倍幸せになろう
#Sassの使い方(簡易版)
とりあえずレイアウト編集できればいい！という方はapplication.scssに編集内容を記述すればviewに反映されます。
ただおすすめはしません。
理由は以下のような問題があるためです。
- どの
viewファイルに対してどのscssを適用させているのかわからない。 -
application.scssファイルが必要以上に肥大化する。 - 保守性が著しく低下する。（特にチーム開発の場合）
例）app/views/session.html.slim中のsession_formクラスと
app/views/post.html.slim中のpost_formクラスと
app/views/user.html.slim中のuser_formクラスに
各々のpaddingを適用させたい場合
@import 'bootstrap';
.session_form {
padding: 10px 100px;
}
.post_form {
padding: 20px 200px;
}
.user_form {
padding: 30px 300px;
}
#Sassの使い方(viewファイルごとに管理したい場合）
管理しやすい使い方としてviewファイルごとにscssファイルを用意しapplication.scssに読み込ませることをおすすめします。
手順は
１）scssファイルを入れるためのディレクトリ（ここではpartialディレクトリ）を用意する。
２）application.scssファイルにpartialディレクトリを読み込ませるため@import 'partial';を記述する。
3)partialディレクトリ内に_(アンダーバー)から始まるscssファイルを作成し編集内容を記述する。
４）partialディレクトリ内に_index.scssファイルを作成し３）で作成したファイル名から_を取り除いた形式で記述する。
ここで大事なことが2点あります。
1点目はアンダーバーを除いた形式で記述しないとscssファイルが読み込まれないことがあるため要注意。
2点目は_index.scssファイルがないとapplication.scssファイルがpartialディレクトリを読み込んでくれません。
例）
１）scssファイルを入れるためのディレクトリ（ここではpartialディレクトリ）を用意する。
２）application.scssファイルにpartialディレクトリを読み込ませるため@import 'partial';を記述する。
@import 'bootstrap';
@import 'partial';
3)partialディレクトリ内に_(アンダーバー)から始まるscssファイルを作成し編集内容を記述する。
.login_form {
padding: 10px 100px;
}
.post_form {
padding: 20px 200px;
}
.user_form {
padding: 30px 300px;
}
４）partialディレクトリ内に_index.scssファイルを作成し３）で作成したファイル名から_を取り除いた形式で記述する。
ここで大事なことが2点あります。
1点目はアンダーバーを除いた形式で記述しないとscssファイルが読み込まれないことがあるため要注意。
2点目は_index.scssファイルがないとapplication.scssファイルがpartialディレクトリを読み込んでくれません。
// _は記述しない!`_sessions`はだめ。
@import 'sessions', 'posts', 'users';