node-sassのサポートが終了するにあたりDart Sassへ移行した際、変数の前に名前空間を付ける事になると思います。
まだ慣れていないせいか、名前空間をつけ忘れてしまいコンパイルエラーになる事もしばしば、、、

なので最近はルート要素に指定する方法で変数を管理しています。
(慣れろって話ですけど...)

個人的CSS変数の指定について

普段は案件ごとに新規でフォルダを作るのは面倒なので、大枠のテンプレートを作成し複製しています。
初期の状態で指定してある変数が以下になります。

:root {
  // 色の指定
  --main-color: #333;
  --sub-color: #fff;
  --text-color: #333;
  // 文字サイズ
  --xl: 3.2rem;
  --lg: 2.4rem;
  --md: 1.6rem;
  --sm: 1.4rem;
  --ss: 1.2rem;
  // z-index
  --index-header: 100;
  --index-modal: 200;
  --index-animation: 1000;
  //inner幅
  --inner : 110rem;
}

特に変わったものでもないので説明が不要かもしれませんが、軽く紹介します。

色の管理

  --main-color: #333;
  --sub-color: #fff;
  --text-color: #333;

■ --main-color
サイトでメインとなるカラーを指定
■ --sub-color
サイトでサブとなるカラーを指定
■ --text-color
文字色の管理

文字サイズの管理

  --xl: 3.2rem;
  --lg: 2.4rem;
  --md: 1.6rem;
  --sm: 1.4rem;
  --ss: 1.2rem;

名前の付け方は、Tailwind CSSから拝借しています。
普段はルートサイズを62.5%で指定しているので、1rem = 10px となっています。

z-indexの管理

  --index-header: 100;
  --index-modal: 200;
  --index-animation: 1000;

大きなコンテンツで必要な場合は、こちらで調節をしていきます。
局所的に使用していきたい場合には下記のように指定していきます。

z-index:calc(var(--index-header) + 1);

こちらの管理方法は、猫チーズさんのツイートを参考にして取り入れさせていただきました。

私はCSS変数使って
--z-index-header: 100;
--z-index-modal: 200;
みたいにグローバルで管理してます！

グローバルに定義するほどじゃなくて局所的に〇〇より前に出てきて欲しいときは、z-index: calc(var(--z-index-〇〇) + 1); してます

— 猫チーズ (@_nekocheese_) November 24, 2020

コンテンツ幅の管理

  --inner : 110rem;

インナー幅やコンテンツ幅を管理しています。

まとめ

以上、個人的なCSS変数の管理についてでした。
管理について悩んでいる方の参考に少しでもなれば幸いです。
多分(というか絶対)もっと良い管理の仕方があるので、引き続き模索していこうと思います。
「こうした方がいいよ」とかあれば、お問い合わせよりご連絡いただけたらと思います。