CSSで変数（カスタムプロパティ）を使ってみよう

2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの

[kathew]

IEが非対応なせいでどうにも使い辛い。それさえ無視できるならすばらしい仕様

[daizo1117]

“が入ってるよー！」という宣言をします。各セレクターに記述することもできますが、:root に定義してグロー”

[k75mix]

“CSSカスタムプロパティ”

[yone-yama]

“CSS custom properties for cascading variables”

[akanezora]

これは便利そう。

[zzitne]

メモ

[idr_zz]

Sassとの違い。メディアクエリが効く。いいね！ ん？IE11未対応と！？く、ここでもIEが… CSSで変数（カスタムプロパティ）を使ってみよう｜Webクリエイターボックス @webcreatorboxさんから

[candykebin]

“変数の中で変数を使う”

[lalupin4]

CSS Variables

[c-miya]

個人的なサイトならそろそろ使ってもいいかな、と思ってる。

[suika3417]

マイクロソフトが一番ＩＥやめてって思ってるからね…

[gdgd-shinoyu]

いつのまにか対応されていた。よさそう。

[hedeyoshi]

またIEか！もういい加減にしてくれ……IE6の時から苦しめられてる。

[bottomzlife]

非対応ならPolyfill書けばいいだけやん＞IE11

[k_ume75]

IE非対応...。

[Kuichi]

便利。ただIE11が…