💨

【初学者】Railsのapplication.cssとapplication.scssの違いについて

2023/12/30に公開

Railsのファイルでcssを定義する際にassets/stylesheets/application.cssとjavascript/stylesheets/application.scssでファイルが2つあるけどどっちに書けばいいの？と思うことがあったので違いを確認しておこうと思います。

二つのファイルの特徴

CSSファイルであり、スタイルシートを定義するためのファイルです。主に、HTML要素のスタイルやレイアウトを指定するために使用されます。このファイルでは、セレクタとプロパティを使用してスタイルを定義します。

SCSSファイルであり、CSSを記述する際に使えるSassの文法を使用することができるファイルです。Sassは、CSS記述をより簡潔にしたり、変数やネストなどの機能を使って再利用性を高めるための拡張機能です。SCSSファイル内では、Sassの特有の機能を使用することができます。

最終的にどちらのファイルにまとめるか、今回はAIメンター様に聞いてみたところ、プロジェクトの要件や開発チームのスタイルによって異なるようです。

プロジェクトが小規模である場合や、スタイルのルールがシンプルな場合は、application.cssだけを使うことで十分かもしれません。
プロジェクトが大規模で、スタイルルールが複雑である場合には、application.scssを利用することでスタイルの効率的な管理や再利用性が向上するかもしれません。

開発チームのメンバーがSassの知識や経験を持っている場合、application.scssを使うことでより柔軟なスタイルの作業が可能になるでしょう。
逆に、開発チームのメンバーがSassに不慣れである場合や、好みがある場合には、application.cssを使うことでスタイリングの作業を簡素化することもできます。

上記はあくまで一般的な意見に過ぎないと思うので、ここら辺は使いながら意識していければと思いました。