如何在css中使用js的变量呢？

在开发中我们经常需要根据数据的个数或其他数据来设置元素的宽度或者其他属性。
js提供了这样的方法可以实现。
document.getElementById(id).style.property = new style
使用原生js操作dom的方法来改变样式。
但在vue开发中有更简单的实现方案，并且可动态获取数据，并调整样式。

<view class="h-tab-select">
		<view class="tab-content" >
			<template v-for="(item,index) in list">
				<view class="tab-item" :class="{active:hIndex==index}" :key="index" @tap="tapTab(index)">
					<text class="tab-item-text">{{item.name}}</text>
					<text class="tab-item-text number" v-if="showNumber">({{item.number}})</text>
				</view>
			</template>
		</view>
	</view>

如上，是一个tab组件的封装，在不确定tab个数的情况下，如何动态设置每个tab的宽度呢？
我们可以在标签.tab-content上添加:style="{’–listlength’:list.length}" 将tab数量传入css变量里。然后再css中直接使用该变量。

.tab-item{
	width: calc(100% / var(--listlength));
	text-align: center;
	padding:20upx 0;
}