Vivliostyle CoreでCSSカスタムプロパティ（変数）が利用可能になったらThemeで活用してほしい

[MurakamiShinyu]

Vivliostyle Themeをカスタマイズしやすくするための議論で、Sassの変数をパラメータにすることが検討されてきました（関連issue #19 や #9）。

最近のWebの標準では、CSSカスタムプロパティ（CSS変数）が利用できるようになっているのですが、Vivliostyle Coreでそれが未サポート（Issue: https://github.com/vivliostyle/vivliostyle.js/issues/540 ）であるために、Vivliostyle ThemeでのCSSカスタムプロパティの利用は検討されてませんでした。

Vivliostyle CoreではCSSカスタムプロパティを近いうちに（できれば10月にでも）サポートしようと検討中です。 それが使えるようになった場合、Vivliostyle Themeのカスタマイズのしくみに利用するのがよいと思います。

コンパイルが必要なSass変数とは違って、CSSカスタムプロパティはCSSの解釈時にCSSのカスケーディングのしくみにしたがって有効になるので、Vivliostyleでの組版実行時にパラメータをVivliostyle Coreに渡すことがより簡単です。

参考記事: MDN - CSS カスタムプロパティ (変数) の使用 https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

[AyumuTakai]

SASSベースで変数を使ってレイアウトを調整できるテーマを作成したときに悩まされたのが、ChromeとSafariでは内部的にpxが整数でしか扱われないことでした。

SASSではfloor,ceil,round関数があるので解決できましたが、今のところCSSには存在しないようです。

以下のようにcss wgで議論はあったようですが、結果どうなったのか追えていません。 https://github.com/w3c/csswg-drafts/issues/2513

CSS変数が使えるようになるならとても有り難いですが、必要な関数が無いとcalc()で計算したときに微妙なレイアウトのずれにストレスを貯める人も増えてしまいそうです。

[yamasy1549]

10月MTGでのメモ

• 既存のSass変数は将来的に（利用可能になったら）CSSカスタムプロパティに置き換える
• Theme内でSassの関数などを使うぶんには問題ない

[depth42]

I am curious: What is the status of the CSS variables? Are they still on the roadmap?

[MurakamiShinyu]

@depth42 Yes, it's on my to-do list. I hope I can complete it during this summer.

[MurakamiShinyu]

Now, Vivliostyle supports CSS variables!