弊社サイトはVuetify2系を使っています。私は8月からジョインしたばっかりなのですが、私が関わることになった時点で$spacer変数が8pxに上書きされていました（defalutは4px）
これにより、例えばma-2のスペーシングヘルパークラスを用いた場合はmarginが全方位に16pxかかるというような仕様になっていました。

ですが、8px単位で余白を設定していくことが苦しい部分があったので、8pxを2pxに変更したいという要望が上がり、私が変更を施したのでどうやったかのメモ書きになります。

影響範囲をしらべる

当初は$spacer変数を8pxから2pxに変更して、スペーシングヘルパークラスの数字を4倍すれば済むという想定でした。しかし、やってみたところ、$spacer変数に影響の受けるコンポーネントがいくつか存在することがわかりました。

cssでそのコンポーネントのスタイルを上書きするという選択肢もありましたが、スマートでないと思いました。

そこで、Vuetify本体のCSS変数がどのように扱われているのか、コードを見に行くことにしました。

https://github.com/vuetifyjs/vuetify/blob/3f8f577b51a7bfe948a075903348b886246e637e/packages/vuetify/src/styles/settings/_variables.scss

ここを見ると、$spacer変数を使用している別の変数があることに気が付きます。

$grid-gutter: $spacer * 6 !default;
$form-grid-gutter: $spacer * 2 !default;

こちらを使用しているコンポーネントがあることから、$spacer変数の影響が出てしまっていたようです。

解決策としては、$spacer変数を変更しようとしているSCSS内でこの２つも上書きしてしまうことです。私は下記のようにやりました。

$spacer: 2px;
$old-spacer: 8px;
$grid-gutter: $old-spacer * 6 !default;
$form-grid-gutter: $old-spacer * 2 !default;

これで、コンポーネントに悪影響が出ることはありません。

これをした上で、スペーシングヘルパークラスの数字を4倍（数字が16を超過した場合は通常のclassで設定しなおす）という作業を行いました。私はスマートでないエンジニアなので一個一個検索してポチポチやりました。

特に、大それた修正でもありませんが、こんなメモ書きが誰かの役に立ったらいいなと思います。