vue3中css使用script中定义的变量

代码

javascript 复制代码
<template>
  <div class="box">haha</div>
</template>

<script setup lang="ts">
const boxWidth = '500px'
</script>

<style lang="scss">
.box {
  width: v-bind(boxWidth);
  height: 200px;
  background-color: red;
}
</style>

效果

相关推荐
LIUAWEIO16 小时前
CSS 让鼠标呈现手型,鼠标悬浮变小手
css·html·css3·html5
ZC跨境爬虫20 小时前
跟着 MDN 学CSS day_51:支持旧浏览器的布局策略
前端·css·html·tensorflow·媒体
Larcher20 小时前
从 0 到 1:Node.js 调用 AI API 的完整避坑指南
前端·javascript·css
八目蛛1 天前
八目蛛网络(免费工具网站导航)
css·vue.js·开源·vue3·html5·ai编程
xiangxiongfly9151 天前
CSS @layer总结
css·layer
大家的林语冰1 天前
CSS 新函数上市,一行代码让文本自动变色,无需 JS 也能符合 W3C 无障碍对比度标准
前端·javascript·css
DFT计算杂谈1 天前
VASP 磁性结构可视化:一键生成完美 VESTA / MCIF
java·前端·css·html·css3
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_49:定位实例练习从入门到精通
前端·css·学习
用户059540174461 天前
GitHub Actions 自动化测试流水线踩坑实录:一个 `&&` 符号,折腾了 4 小时,但前端事故率降为 0
前端·css
用户059540174461 天前
大模型多轮对话“失忆”踩坑实录:一次线上事故让我排查了48小时,最终靠 Playwright + Pytest 把记忆锁死
前端·css