そもそもSassとは？
CSSを効率的に書けるように、CSSの機能を拡張した言語です。
Sassを使うメリットは
- CSSを簡単に書ける
- CSSの中で変数を使ったり、計算を行うことができる
などがあります。
そんな便利なメリットを持つSassですが、特に大きなメリットとして、
- 複数のCSSファイルをまとめられる
ことが挙げられます。
Sassで複数のファイルをまとめる手順
① ファイルの中でまとめる部分を決める。
ある一定の内容ごとにまとめられるところがないかを探します。
例)メニューバー、メインコンテンツ、送信フォーム...
また、一定の機能でまとめることもできます。
例)Sassで定義した変数、リセットCSS...
このように分割することで、コードが読みやすくなり、
後々コードに修正を加える時も、どこを見ればいいかわかりやすくなります。
特に複数人で開発する時はこういった風に、コードを分割して管理してあるのは重要になってくるのではないでしょうか。
②パーシャルファイルを作成する。
ではどのようにして管理するのか説明します。
styesheetsの中のファイルに注目してください。
＿(アンダースコア)から始まっているファイルがあると思います(_group.scssなど)
※今回は.scssの拡張子に関しては割愛します。
これがパーシャルファイルです。
このように_(アンダースコア)から始まるファイルの中に分割したい内容を記述します。
③パーシャルファイルを読み込む
分割したパーシャルファイルをまとめるには
@importをつかいます。
@import "ファイル名"; とすることで読み込むことができます。
この時アンダースコアはとって記述するので注意してください。
全てapplication.scssの中に配置しました。
これで全てパーシャルファイルが読み込めました。
Sassを使う場合はぜひ、この方法を使ってみてください。