vue使用CSS变量详解

<template>
  <div
    :style="{ '--deviation': '-' + deviation }"
    class="text"
  >
    {{ text }}
  </div>
</template>

<script>
export default {
	name: 'QTest',
	props: {
		text: {
			type: String,
			default: '请传入内容'
		},
		// 动态传入不同的值，根据不同的值得出最终的样式
		deviation: {
			type: String,
			default: '75%'
		}
	},
}
</script>

<style lang="scss" scoped>
.text {
    width: 100px;
    overflow: hidden;
    transition-delay: 5s;
    animation: itemSlide 5s linear infinite;
}

@keyframes itemSlide {
    0% {
        transform: translateX(0%);
    }

    100% {
    	/*使用变量*/
        transform: translateX(var(--deviation));
    }
}
</style>

<template>
  <div
    :style="{ '--lineheight': lineheight }"
    class="text"
  >
    <div class="container"></div>
  </div>
</template>

<script>
export default {
	name: 'QTest',
	props: {
		lineheight: {
			type: String,
			default: '200px'
		}
	},
}
</script>

<style lang="scss" scoped>
.text {
    width: 100px;
    height: 400px;
    overflow: hidden;

    .container {
        height: calc(100% - var(--lineheight));
        background-color: red;
    }
}
</style>

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--lineheight')).trim()