はじめに
Sass 基礎文法 1 はこちらをクリック願います。
フロント実装を学んでいく上で、Sassを用いておりますので、用語等を中心に整理していきます。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。
Sassのファイル及びフォルダの役割
①style.css
直接編集せず、sassコマンドを実行し、style.scssファイルを作成・更新する。
②stylesheetsフォルダ
全てのscssファイルを管理するフォルダ
③style.scss
このファイルで全てのscssファイルを@importで読み込む
qiita.scss
例）@import "reset"; /*_reset.scssを読み込む */
qiita.scss
@import "./config/variable"; /* configフォルダの中の_variable.scssを読み込む */
④_reset.scss
-
ブラウザによって初めからcssがそれぞれのhtmlに設定されている。
→ そのCSSによって、意図しないデザインになってしまうことがある。 -
そのようなことを防ぐために、初めにブラウザごとのCSSをすべてリセットする。
→ このようにブラウザごとのCSSを打ち消すCSSのことをリセットCSSという。
⑤configフォルダ
プロジェクト設定ファイルやscssで使用する変数を定義するファイルなどを管理するフォルダ
⑥modulesフォルダ
モジュールを管理するためのフォルダ
- モジュールとは？
→ いくつかの要素をまとめた部品の集合
→ ヘッダー、フッターのような用途ごとに分けることができる。
⑦venderフォルダ
ライブラリのファイルを管理するフォルダ
- ライブラリとは？
→ あらかじめcssが書かれたフォルダ
⑧overrideフォルダ
venderフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダ
さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。