CSS使用JS变量

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>
相关推荐
golang学习记1 分钟前
从0死磕全栈之使用 VS Code 调试 Next.js 应用完整指南
前端
shayudiandian3 分钟前
JavaScript性能优化实战
开发语言·javascript·性能优化
Mintopia3 分钟前
🧩 隐私计算技术在 Web AIGC 数据处理中的应用实践
前端·javascript·aigc
尘世中一位迷途小书童5 分钟前
代码质量保障:ESLint + Prettier + Stylelint 三剑客完美配置
前端·架构
Mintopia6 分钟前
🧭 Next.js 架构与运维:当现代前端拥有了“分布式的灵魂”
前端·javascript·全栈
尘世中一位迷途小书童16 分钟前
从零搭建:pnpm + Turborepo 项目架构实战(含完整代码)
前端·架构
JarvanMo25 分钟前
Flutter 中的 ClipRRect | 每日 Flutter 组件
前端
某柚啊26 分钟前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c27 分钟前
如何学习Lodash源码?
前端·javascript·学习
JamSlade33 分钟前
react 无限画布难点和实现
前端·react.js