vue中css变量的使用

<template>
    <div class="test">
        <span :style="spanStyle" class="span1">hello world</span>
        <br>
        <span :style="{'--width': widthVar}" class="span2">hello earth</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            spanStyle: {
                "--color": "red"
            },
            widthVar: "100px"
        };
    }
}
</script>
<style scoped>
    .span1 {
        color: var(--color);
    }
    .span2 {
        text-align: center;
        position: relative;
        width: var(--width);
    }
    .span2::after {
        content: '';
        display: block;
        position: absolute;
        left: 100%; 
        width: var(--width);
        height: var(--width);
        border-radius: 50%;
        border: 2px solid black;      
    }
</style>

但相信大多数人写 Vue 用的都是 CSS 预处理器，这里也给出使用预处理器使用这种方案的方法（我这里给出 Sass 的用法，Stylus，Less与之类似）

<style scoped lang="sass">
    // 只在使用 CSS 变量的时候和前面略有不同
    .span2
        width: #{'var(--width)'}
</style>

这里的#{'var(--width)'}是 Sass 里的插值，类似于 js 里的${}。官方的解释用法见下图。

意思就是这样插入一个字符串，在把 Sass 编译成 CSS 后会完整地保留引号之内的内容（既然 Sass 不能直接使用 CSS 变量，那就编译后使用嘛）。其它的预处理器应该都有类似的插值语法，大家在官方文档里搜索关键词 interpolation或者quoted string应该就可以查到了。

总结

将二者相辅相成并且结合 Vue 原有的:class和:style，相信大家能写出更优雅的 Vue 代码。