1. CSS变量
CSS 变量（也称为自定义属性）允许我们在 CSS 中定义可重复使用的值，并将其应用于不同的选择器。为了创建一个 CSS 变量，我们需要使用 -- 前缀，然后可以像常规属性一样使用它。
:root {
--primary-color: blue;
}
h1 {
color: var(--primary-color);
}
2. 如何在Vue2中使用
-
template
<div class="lines" :style="{'--row':row}" >
{{ content }}
</div>-
scss
.lines {
-webkit-line-clamp: var(--row);
-webkit-box-orient: vertical;
}-
JS
data() {
return {
row : 1
}
},3. 如何在Vue3中使用
在 Vue3 中，提供了一种新的快捷使用方法：v-bind()
<script setup>
const myStyle= {
color: '#999'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('myStyle.color');
}
</style>
