CSS使用JS变量

寒寒_2024-04-02 10:55

1. CSS变量

CSS 变量（也称为自定义属性）允许我们在 CSS 中定义可重复使用的值，并将其应用于不同的选择器。为了创建一个 CSS 变量，我们需要使用 -- 前缀，然后可以像常规属性一样使用它。

css 复制代码

:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}

2. 如何在Vue2中使用

template

html 复制代码

    <div class="lines"  :style="{'--row':row}" >
      {{ content }}
    </div>

scss

css 复制代码

.lines {
  -webkit-line-clamp: var(--row);
  -webkit-box-orient: vertical;
}

JS

javascript 复制代码

data() {
    return {
        row : 1
  }
},

3. 如何在Vue3中使用

在 Vue3 中，提供了一种新的快捷使用方法：v-bind()

javascript 复制代码

<script setup>
const myStyle= {
  color: '#999'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('myStyle.color');
}
</style>