CSS変数、複数の情報は入らないのか？？

Question

.header{
    display: -webkit-box; /*Android4.3*/
    display: -moz-box;    /*Firefox21*/
    display: -ms-flexbox; /*IE10*/
    display: -webkit-flex; /*PC-Safari,iOS8.4*/
    display: flex;
}

このbrowserごとに設定しているdisplay: flex; を一つにまとめてdisplayFlexAllのような変数として使いたいと考えております。

試しに

:root {
    --displayFlexAll:(
        display: -webkit-box; /*Android4.3*/
        display: -moz-box;    /*Firefox21*/
        display: -ms-flexbox; /*IE10*/
        display: -webkit-flex; /*PC-Safari,iOS8.4*/
        display: flex;
    );
}

.header{
    var(--displayFlexAll)
  
}

などとしてみましたが、うまくいかず
→「CSS変数　配列」「CSS 関数」などで調べてみても出てこず

こちらもし何か方法がわかる方がいましたら回答よろしくお願いいたします。

Answer 1

https://qiita.com/morishitter/items/4a04eb144abf49f41d7d

ベンダープリフィクスをつけることが目的であれば、postcssのAutoprefixerで対応できると思います。

https://github.com/postcss/autoprefixer/blob/master/README.md

webpackを利用しているのであればloaderも用意されています。

https://github.com/postcss/postcss-loader/blob/master/README.md

ちなみに質問者さんがやりたいことは、リンク先の記事にも書いてありますが、以前はCustom Sets of Propertiesなるものが提案されてはいたが仕様落ちになったようです。

Answer 2

SCSSの方がいいかもしれません

• CSSのメタ言語Sass(SCSS)、LESSの完全入門

Answer 3

CSS変数では期待されるような処理は出来ません。
また、コメントで記載されているブラウザもあらかた対応外となります。
https://caniuse.com/#feat=css-variables

変換処理が必要となりますが、mts10806さん、HayatoKamonoさんが挙げられている手法を取るのが手っ取り早いかと。