【Rails】scssフォルダ構成について

scssフォルダ構成について

目次

1. cssからscssに変更にあたって
2. scssフォルダ構成

1. cssからscssに変更

プログラムで利用しているcssをscssに変更しました。
scssを利用すると入れ子構造で記述ができるため、セレクタの記述量が減り、可読性の高いコードになります。また、変数を利用できプログラム言語のような記述をすることが可能になります。その他にも演算・関数を利用できるようになり、従来のcssのような冗長な記述を解消することが可能になります。
scssではフォルダ構成が少し変わるので、備忘録としてまとめました。

2. scssフォルダ構成

scssのフォルダ構成は以下のようになります。

フォルダ	説明
config	プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダです。
mixin	scss内で使用するmixinファイルを管理するフォルダです。
modules	モジュールを管理するためのフォルダです。 モジュールとは、いくつかの要素をまとめた部品の集合という意味です。 ヘッダー、フッターのような用途ごとに分けることができます。 モジュールを使うことでまとまったCSSを独立したものとして管理することができます。
vendor	ライブラリのファイルを管理するフォルダです。 cssにはライブラリと呼ばれるものがあります。 ライブラリとはあらかじめCSSが書かれたファイルです。 有名なCSSのライブラリでは、bootstrapがあげられます。 ライブラリを効率よく利用することで、コーディングのスピードが格段に上がります。
override	vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダです。

以上がscssでのフォルダ構成となります。