ModuleはCSSで変数を使うために、その変数を定義するためのプロパティについての仕様だ。29で実装されたらしく、ちょっとお触りしてみた。properties”が良かったのでこっちも参照するのをおすすめする。基本的な使い方CSSで変数というと、SassやLESSなどのプリプロセッサとして使うことができ、そのあたりで使ったことがあるのであれば、CSSerの人でもなんとなく馴染みやすい仕様かもしれない。いえ定義とその参照方法はSassやLESSのそれとは全然異なる。`var-`の後が参照する時のキーになる。white;}/*`var()`で参照する。var(text-color);}上記のように書けば、次のようなCSSを書いたときと同等になる。white;}変数をどう使うかSassの時でもあんまり自分は変数をそれほど有用性のある使い方をしているとは思わない。redとするような使い方がまず一つ。他にはメディアクエリで特定のスクリーンサイズ向けの定義を各所でおこないたい場合には、その条件を変数として定義することがある。}}しかしこのノリでカスタムプロパティで実現しようとしても上手くいかなかった。}}これを実現する方法は今のところ浮かんでない。あとおまけで、次のページにアクセスすると、対象ブラウザがカスタムプロパティに対応しているかどうか分かるようにしてみた。29をもしインストールしたならば覗いてみてほしい。スコープとポストプロセッサーMyth先に紹介した記事ではあまり触れられていなかったスコープについて検証してみる。Sassなどではネストの中で変数に違う値が入れば、そちらが優先される。green;}ではカスタムプロパティでの変数のスコープはどうなっているのか。同じようなコードを用意する。今度はSassではなくCSSだ。green;}この結果は次のようになる。{...}というように再度h1ルールを定義しなおしていない点だ。これによってはSassにおける変数と、カスタムプロパティにおける変数の扱いに違いがあるのがわかる。ここで先日登場したMythというプリプロセッサの話を絡める。Polyfillといったアプローチでつくられている。構文も独自のものではなく、進行中の仕様と同様の構文で書くことができる。その中には本記事のテーマであるカスタムプロパティも含まれており、Mythを介して非対応ブラウザでも使えるようにみえる。このアプローチは面白いなぁと思っていたところ、@cssradarから、CompassのChrisがインチキだとお怒りであることを聞いた。その具体的な例として、先ほどのスコープのくだりで説明したコードをそのままMythに通してみる。すると次のようなCSSになる。green;}![](/images/css-custom-property/03.png)これは本来のカスタムプロパティの仕様として期待されるものではない。Mythは一見はCSSの仕様通りに振るまいそうな打ち出し方であったものの実際には異なるということだ。そもそもMythの内部は、Sass、LESSに次いて使われているであろうStylusの開発者であるTJがつくったReworkの機能を元にしている。その中の変数の機能での説明では下記のように補足されている。variables.あくまでこの機能で提供されるのはグローバルの変数のみだということだ。いえ、Mythには期待をしてるので、引き続き様子をみて触ってみたい。奥が深いカスタムプロパティ色々と試してみたものの、まだあまり上手く使える気はしないものの、これが他のブラウザでも実装されるようになれば色々とアイデアを考えてみたいものだ。2013の23日目の記事として書いた。次はnoha_koさんです。SpeakerBY-NC-SA。