Vue项目，在less/scss中使用变量

vue组件中，如何在less/scss中使用变量，以二次封装el-tab样式组件为例

<!--
* @description 封装el-tab样式
!-->
<template>
    <div class="tab-comp" :style="{ '--item-max-width': itemMaxWidth, '--tab-comp-height': height, '--tabs-label-height': tabsLabelHeight, '--tab-item-font-size': fontSize }">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'TabComp',
    props: {
        // tab-item的最大宽度, 自定义最大宽度，超出省略, 结合slot=label插槽加.tabs-label使用
        itemMaxWidth: {
            type: String,
            default: 'max-content'
        },
        // 高度
        height: {
            type: String,
            default: '40px'
        },
        // el-tab-pane的slot=label插槽，类名tabs-label高度, 未使用不传
        tabsLabelHeight: {
            type: String,
            default: '36px'
        },
        fontSize: {
            type: String,
            default: '14px'
        }
    },
    data() {
        return {}
    },
    created() {},
    methods: {}
}
</script>
<style lang="scss" scoped>
.tab-comp {
    width: 100%;
    height: var(--tab-comp-height);
    ::v-deep {
        .el-tabs {
            .el-tabs__header {
                margin-bottom: 0;
                .el-tabs__nav-prev,
                .el-tabs__nav-next {
                    line-height: var(--tab-comp-height);
                }
                .el-tabs__item {
                    max-width: var(--item-max-width); // 自定义最大宽度，超出省略
                    height: var(--tab-comp-height);
                    padding: 0 12px !important;
                    font-weight: 400;
                    font-size: var(--tab-item-font-size);
                    color: #333333;
                    line-height: var(--tab-comp-height);
                    box-sizing: border-box;
                    &.is-active {
                        font-weight: 500;
                        color: #db9130;
                    }
                    &:nth-child(2) {
                        padding-left: 0 !important;
                    }
                    .tabs-label {
                        width: 100%;
                        height: var(--tabs-label-height);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
            .el-tabs__nav-wrap::after {
                height: 0;
            }
        }
    }
}
</style>

组件使用

<tab-comp item-max-width="122px">
    <el-tabs v-model="activeId">
        <el-tab-pane name="1">
            <div slot="label" class="tabs-label">结果集叽叽叽叽急急急急急急斤斤计较</div>
        </el-tab-pane>
    </el-tabs>
</tab-comp>