Ionic 4のglobal.scssを読む

追記： 公式がドキュメントに追記しましたので、そちらご紹介しておきます。日本語翻訳版です。
グローバルスタイルシート

--

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

• @ionic/coreのComponents
• @ionic/coreのComponentsの変数を用意しているtheme/variables.scss
• Projectのデフォルトテンプレートglobal.scss

「@ionic/coreがWeb Componentsでつくられていて、Shadow DOMでCSS定義されてる。だから:root経由で直接変数をさわることうんぬん」という上2つの話は別にするとしまして、ここでは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あたりを読んでください）。

ですので、このglobal.scssにimportされているファイルの元ファイルを追いたいと思うと、　ionic/core/src/css/の中身を追うことになります。

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

core.css

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にあります。

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

structure.css

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にあります。

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

padding.css　/ float-elements.css / text-alignment.css / text-transformation.css / flex-utils.css

まぁ読んだらそうだな、というか。CSSまわりのディレクティブを定義づけています。

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

<div padding></div>

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

まとめ

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