記事の詳細
CSS変数(カスタムプロパティ)の使い方
CSSのフレームワークによくFlexyを利用しています。flexboxをじゃんじゃん使っていくタイプなのでこいつがあるととても便利。
BootstrapやMaterializeも使ってみたいはみたいのですが頭がサルなので、プロパティがやたら多いと覚えられないんですよね。
Wordpressを一緒に利用した構築の場合、フルスクラッチが前提になりがちなので「それはちょっと無理……」なことが多く、Flexyのような機能が狭められたタイプのものを愛用しています。
で、そのFlexyを使っているとこういうのが出てきます。
DreamWeaverで表示したとき、このエラーが消えないのです。
「Expected RBRACE」とは
直訳すると「 ‘}’を期待してるぞ」という意味らしいです。RBRACEは「”right brace”または “right curly bracket”」でこれはCSSの閉じかっこ右側を意味します。そのままGoogle翻訳機に放り込むと「予想通り」とか出てきたので大混乱でした。
平たく言えば「構文ミス」のサインです。
意味的には「かっこ閉じて」くらいなのですが、CSSの記載に問題があるとこのエラーが出ます。
つまり上記でエラーが出ているのはどこかで構文ミスを起こしている、ということ。
1 2 3 4 5 |
:root { --m: 15px; } Expected RBRACE at line 2, col3 |
2行目の3カラム目にエラーあるよ、という意味なんですが、どこがエラーなのかさっぱりでした。
いろいろ試してみたところ、問題があるのは「–」の部分。
これは、CSS変数(カスタムプロパティ:CSS Variables)と呼ばれるCSSの変数プロパティです。
CSS変数とは
CSS変数は、2016年3月24日に公開されたGoogleChrome 49でサポートされました。結構前ですね。
今だとこれくらいサポートしています。
>CSS Variables (Custom Properties)
おおよそすべての主要ブラウザにサポートされていますが、IE11のあたりがネックです。
日本では、まだ使っている方、いっぱいいますからね。
具体的にCSS変数ってナニ? といいますと、もう「変数ですね」という感じです。
こんな風に使います。
1 2 3 |
:root {--main-margin : 15px } .sampleclass { margin : var(--main-margin); } |
:root で定義した「–main-margin」を sampleclass のマージンに適応しています。
:root は「html」のこととほぼイコールなので、全てのhtmlにおいて「–main-margin」の値が使えることになります。こんな風にCSSが適応されるすべてのhtmlに使える変数を、グローバル変数、なんて言い方をするようです。
「全部のpのテキストの色をグレイにしてたけどもう少し赤みがかったほうがいいなー」なんてなったときにいちいちCSSの#CCCを置き換えで指定のカラーコードにするよりも、:rootの値を変えたほうが早い、というわけです。べんりー!
もちろんid、classともにCSS変数を利用することができますので、ブロック要素での管理もできるわけですね。べんりー!
CSS変数のメリット
- CSS変数はメディアクエリ内で利用できる
- CSS変数はJavaScriptで利用できる
「Sassとかで変数使えるじゃん」という意見も聞こえますが、Sassを代表とするCSSプリプロセッサは、あくまでCSSを簡単に記載するものであって、CSSを直接書いているわけではありません。CSSプリプロセッサは結局CSSに変換されるので、変数の定義は現段階ではできないのですね。
つまり、「CSS変数を使いたいならCSS変数を直接書くしかない」ということです。もしかしたらプリプロセッサの変数がそのままCSS変数になる日もあるのかもしれませんが、そんなんだったらもうCSSで直接書いてよくない……? などと私などは思います。
しかしJavaScriptで利用できるうえにその値の変更もJavaScript内で可能となると、幅が広がりすぎてすでに何ができるのかわからない感がしますね。
Dream WeaverはまだCSS変数に対応していない?
おそらく対応していないからCSS変数の部分がエラーになってしまうのだろう、というところで落ち着いています。
気になるのですがしかたありません。とくにIE11に対応していかなければならない現状では、Flexyはoldタイプを使って対応していくほかないでしょう。
CSS変数はこれからかなり大きく発展していくだろうと思いますので、積極的に研究していきたいですね。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。