Ionic 4のglobal.scssを読む

追記： 公式がドキュメントに追記しましたので、そちらご紹介しておきます。日本語翻訳版です。
[グローバルスタイルシート](https://ionicframework.jp/docs/layout/global-stylesheets)

--

Ionic 4（@angular/ionic)のStarter Templateには、Projectのデフォルトテンプレートとして`global.scss`を用意しています。つまり、Ionic4では、プロジェクトのデザインを以下の3つで行っています。

- `@ionic/core`のComponents
- `@ionic/core`のComponentsの変数を用意している[`theme/variables.scss`](https://github.com/ionic-team/starters/blob/master/angular/base/src/theme/variables.scss)
- Projectのデフォルトテンプレート[`global.scss`](https://github.com/ionic-team/starters/blob/master/angular/base/src/global.scss)

「`@ionic/core`がWeb Componentsでつくられていて、Shadow DOMでCSS定義されてる。だから`:root`経由で直接変数をさわることうんぬん」という上2つの話は別にするとしまして、ここでは[`global.scss`](https://github.com/ionic-team/starters/blob/master/angular/base/src/global.scss)を読んでいきます。

まず、`global.scss`の中身は以下の通りです。

```global.scss
// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';

@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';
```

直接node_modulesの中身をみたらもちろん確認することができるのですが、minify後のCSSを読みたくはないので、元のSCSSファイルをGitHubから見ることにしましょう。

`import path`では`@ionic/angular`となっていますが、GitHub上では`ionic/angular`ではなく、`ionic/core` に格納されているSCSSで定義されていました。ビルドの時に`ionic/core`から`ionic/angular`にコピーしてnpm publishしているようです。（興味ある方は[link-copy.js](https://github.com/ionic-team/ionic/blob/master/angular/scripts/link-copy.js)あたりを読んでください）。

ですので、この`global.scss`にimportされているファイルの元ファイルを追いたいと思うと、　[`ionic/core/src/css/`](https://github.com/ionic-team/ionic/tree/master/core/src/css)の中身を追うことになります。

それでは、ひとつずつ見ていきましょう。

## core.css
[core/src/css/core.scss](https://github.com/ionic-team/ionic/blob/master/core/src/css/core.scss) にあります。ざっとみた感じ、2つの役割があって

1. 共通で使う@mixinの定義
`@ionic/core`のComponentsの変数を格納している[`theme/variables.scss`]を、SCSS内で活用できるように展開。

2. アプリの外側を定義
bodyとか、iOSのstatusBarをSafeエリアとして保護する

のふたつをしているようです。

## normalize.css
[src/css/normalize.scss](https://github.com/ionic-team/ionic/blob/master/core/src/css/normalize.scss)にあります。

`normalize.css v3.0.2` をベースにノーマライズしています。ベースというか、ざっと見た感じ、そのまま利用してる感じですね。

## structure.css
[src/css/structure.scss](https://github.com/ionic-team/ionic/blob/master/core/src/css/structure.scss)にあります。

`html`, `body` にCSSを当てています。Ionicは、virtual scrollで挙動しますので、`html`も`body`もheight/max-heightが100%になっています。
言い換えると、これをimportしている限りbodyをスクロールさせることができませんので、もし@ionic/angularで普通のWebサイトを構築しようとするとこいつをコメントアウトする必要があります。

## typography.css
[src/css/typography.scss](https://github.com/ionic-team/ionic/blob/master/core/src/css/typography.scss)にあります。

h1〜h6、`small`が定義されています。

## padding.css　/ float-elements.css / text-alignment.css / text-transformation.css / flex-utils.css
まぁ読んだらそうだな、というか。CSSまわりのディレクティブを定義づけています。

https://beta.ionicframework.com/docs/layout/css-utilities

で解説されてるCSS Utilitiesまわりの話ですね。

```html
<div padding></div>
```

と`padding`をつけると、16pxの余白ができるとか、そういうのはこの5つのファイルです。

# まとめ
来春にはIonic4がリリースされますので、それに備えて少しずつ関連ファイルを読んでおくと、スタートダッシュが切れていいかもしれません。それでは、また。