CSS変数したい

セレクタ {

  /* 変数を定義 */
  --変数名: 値

  /* 変数を取得 */
  プロパティ名: var(--変数名)
}

カスタムプロパティを使ってCSS変数を宣言できます。 設定した変数の値はvar関数で取得できます。

注釈

Can I useで調べると、CSS変数（カスタムプロパティ）は2017年後半に使えるようになっていました。 以下のようにグローバル変数として使うのが便利だと思います。

グローバル変数したい（:root）

:root {
    --font-family: system-ui, -apple-system;
    --color-main: #150201; /* ジャックドー */
    --color-sub: #00213b; /*ビザンツ・ブルー */
    --color-accent: #cee2df; /* ローヌリバー */
}


body {
    background-color: var(--color-main);
}

body > header {
    background-color: var(--color-sub);
}

body > main {
    background-color: white;
}

body > footer {
    background-color: var(--color-sub);
}

:rootにカスタムプロパティを設定することで、 グローバル変数として利用できます

上記のサンプルでは、ウェブサイトのテーマとなる3色（--color-main、--color-sub、--color-accent）を定義して、全体の背景やヘッダー（＝ナビゲーション部分を想定）とフッターに配色しています。