vue2在scss中使用js的变量

1.在computed中定义一个变量,返回前缀为--的css对象

data(){
    return{
        top:100px,
    }
}

computed: {
    listTop() {
		return {
			'--listTop': this.top
				}
			}
}

2.在template中绑定在需要用到css变量的元素，或者该元素的上层元素上。

<view :style="listTop" class="container">

    <!--具体内容 -->

</view>

3.在css代码中使用

<style lang="scss" scoped>
    .container {
	    top: var(--listTop) !important;
    }
</style>

参考:

https://www.cnblogs.com/code-R/p/16984914.html