# Sass
# ディレクトリ構成
Sass(Scss)ファイルのディレクトリ構成は以下を基準とします。
sass/
├─ core/
│ ├─ _variables.scss
│ ├─ _mixins.scss
│ ├─ _functions.scss
│ └─ _reboot.scss
│
├─ utils/
│ ├─ _background.scss
│ ├─ _spacer.scss
│ ├─ _typography.scss
│ └─ _responsive.scss
│
├─ components/
│ ├─ _button.scss
│ ├─ _card.scss
│ ├─ _table.scss
│ └─ etc...
│
├─ layouts/
│ ├─ _header.scss
│ ├─ _footer.scss
│ └─ etc...
│
│ # import用
├─ _core.scss
├─ _utils.scss
├─ _components.scss
├─ _layouts.scss
│
└─ app.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# core
変数やミックスイン、リセット用スタイルなど全てのベースとなる情報、スタイルをまとめたフォルダ
# utils
マージンや背景色、文字などの汎用性の高いスタイル用のフォルダ
# components
各コンポーネント用のフォルダ
# layout
共通レイアウト用(layout-
プレフィックスがついたもの)のフォルダ。
# import用ファイル
各ディレクトリと同じ名称のscssファイルを /sass
の直下に作成し、それぞれでインポート→ app.scss
でマージする
# 変数管理
// TODO
1
# リセット CSS
// TODO
1