style 里面需使用 kekbeb-case 命名方式：即 --dist-menu 而不是 --distMenu 方式，否则在微信小程序模式运行无效。

方法一

<template>
    <view class="fontTip" :style="{ '--dist-menu': distMenu }"></view>
</template>

<script>
    data() {
        return {
            distMenu: 20
        };
    },
</script>

<style lang="scss" scoped>
$dist_menu: var(--dist-menu);
.fontTip {
    margin-top: $dist_menu + rpx;
}
</style>

方法二

<template>
    <view class="fontTip" :style="styles"></view>
</template>

<script>
    data() {
        return {
            styles: {
                '--dist-menu': 20,
                '--dist-plus': 30
            }
        };
    },
</script>

<style lang="scss" scoped>
$dist_menu: var(--dist-menu);
$dist_plus: var(--dist-plus);
.fontTip {
    margin-top: $dist_menu + rpx;
    margin-bottom: $dist_plus + rpx;
}
</style>

更多内容请参考：vue中css变量的使用、Vue超好玩的新特性在CSS中使用JS变量