CSS変数

CSS変数とは、「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」となっています。

変数には文字列や数値などを入れることができます。
この変数に、繰り返し利用する数値やカラーコードなどをCSS変数を使えば、
定義しておいた変数の中身だけ変えるだけで、変更が可能となります。

CSS変数の定義
利用したい部分で var(–変数名) と記述すると、定義した値を当てはめられます。

CSS変数は動的に利用でき、JavaScriptに流用することができます。
下記では.testの変数–text-positionの中身を取得する記述です。