チャットアプリを作成する⑷
ようやくフロント画面の実装が完成しました〜
苦手な分、完成すると嬉しい。
やってみて学んだこととしては「インデントの位置、侮るべからず！」って感じです。
実際の手順でCSSの作成方法を追っていきたいと思います。
１、CSSファイル をパーシャルで複数化する
パーシャルとは
分割したSassファイルのことをパーシャルといいます。
ファイルを分割することで、機能や内容ごとに管理ができるようになります。
一定のルールでファイルを分割して開発することで、どこでなにをしているか見やすくなるので後々変更したり修正しようとするときに便利です。
パーシャル書き方
[パーシャルファイルの作成]
→ファイル名を_（アンダースコア）から始めて記入。
[パーシャルファイルの読み込み]
→@import "ファイル名"と記述。
実際に私は
このように分けました。
フォルダの分け方は以下の通りです。
configフォルダ
configフォルダは、プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダ
mixinフォルダ
mixinフォルダは、scss内で使用するmixinファイルを管理するフォルダ
modulesフォルダ
modulesフォルダはモジュールを管理するためのフォルダです。
モジュールとは、いくつかの要素をまとめた部品の集合という意味です。
ヘッダー、フッターのような用途ごとに分けることができます。
モジュールを使うことでまとまったCSSを独立したものとして管理することができます。
モジュールフォルダ内で、
トップのインフォメーションボックス
左サイドのサイドバー
右側のメインコンテンツ
と３つの部分で分けました。
パーシャルの読み込み
そして application.css.scssで分けたパーシャルを読み込みます。
ここでポイントだったのは
インポートの順番です。
基本的にmodulesは最後に読み込むみたいです。
読み込む順番も大事なんですね〜
勉強になりました。
今日は長くなってしまったので、この辺で。
続きはまた次回書きます。
