# 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

# core

変数やミックスイン、リセット用スタイルなど全てのベースとなる情報、スタイルをまとめたフォルダ

# utils

マージンや背景色、文字などの汎用性の高いスタイル用のフォルダ

# components

各コンポーネント用のフォルダ

# layout

共通レイアウト用(layout- プレフィックスがついたもの)のフォルダ。

# import用ファイル

各ディレクトリと同じ名称のscssファイルを /sass の直下に作成し、それぞれでインポート→ app.scss でマージする

# 変数管理

// TODO
1

# リセット CSS

// TODO
1
Last Updated: 2020/07/01 15:18:21