CSS変数

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

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

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

:root {
  --text-position: center;  /*text-positionは変数名*/
}
.test {
  width: 200px;
  height: 100px;
  text-align: var(--text-position);
}

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

const boxElement = document.querySelector('.test');
const cssStyle = getComputedStyle(boxElement);
const cssValue = String(cssStyle.getPropertyValue('--text-position')).trim(); 
 
console.log(cssValue);