SCSS：CSS Variables適応機能を追加

[qrac]

本体とは別に、CSS Variablesを用いたバージョンを作成する。

• MUSUBii の設計を引き継ぎつつ CSS Variables を採用（IE 非対応）
• React・Vue.js・Nunjucks・WordPress を使った日本語サイト制作を想定
• JavaScript 操作を意識しダークモードなどへの切り替えも容易にする

[qrac]

コア設計にCSS Variablesを採用している例。

• Teutonic CSS
• fortrabbit/teutonic-css
• How to get dark mode working with CSS

[qrac]

CSS Variablesのブラウザ対応状況は、IEがダメ。Android 4.4も標準ブラウザだと多分使えない。

• Can I use... CSS Variables (Custom Properties)

[qrac]

IEに対応させるのであれば、ponyfillの css-vars-ponyfill が良さそうだった。レガシー判定してCSS Variablesの部分だけHeadにインラインスタイル書き出すような設定ができる。

• jhildenbiddle/css-vars-ponyfill

[qrac]

コンパイルせずに使う例。

• chota - A micro CSS framework
• jenil/chota

[qrac]

CSS Variablesをプロパティ値以外に使うのはダメ（メディアクエリなど）。

@media screen and (min-width: var(--screen-width-fablet)) {
  .section > .inner {
    width: var(--section-inner-width-fablet);
  }
}

• CSS native variables not working in media queries - Stack Overflow
• CSS Environment Variables | CSS-Tricks
• Breakpoint variables · Bootstrap

[qrac]

SCSSの変数に組み込めるが、darkenなどの処理が通らなくなるため、処理後の静的な変数を用意しておく必要がある。

:hover {
  background-color: darken($value, 5%);
}

• sass - use css variable with scss darken and ligthen filter - Stack Overflow
• CSS4 Variables and Sass by Jake Albaugh on CodePen

[qrac]

テストも兼ねてダークテーマを同封。

• CSS Variablesでダークテーマを実装 #165

[qrac]

v7.0.0 alpha版にて実装完了。

[qrac]

_common-default.scss を _common.scss にリネーム。

[qrac]

テーマ共通の値を _theme-initial.scss に保管。

[qrac]

カスタマイズの簡略化に伴い、大幅に構造を変更。 #163

[qrac]

この1年、実務ではCSS Variablesを使用する機会が少なかった。IE対応でポリフィルを使う頻度が増えるのは辛いので、デフォルトを false とし、SCSS変数で true 渡した時だけCSS Variablesを適応する。

[qrac]

v7.0.0から適応。