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>

效果

相关推荐
ZC跨境爬虫13 分钟前
跟着 MDN 学CSS day_35:浮动布局完全指南
前端·css·ui·html·tensorflow
宏笋33 分钟前
qss/css 样式中margin和padding的作用和区别
css·qt
ZC跨境爬虫12 小时前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
哆来A梦没有口袋14 小时前
干货精讲 | 初级CSS面试高频考题
前端·css·面试
之歆1 天前
Day21_电商详情页核心技术实战:从LESS预处理到复杂交互实现
开发语言·前端·javascript·css·交互·less
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_30:(玩转列表样式,从基础到进阶)
前端·css·html·tensorflow·媒体
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_31:(精通链接样式,从伪类到导航菜单)
前端·javascript·css·ui·交互
王莎莎-MinerU1 天前
MinerU 深度技术解析:从架构原理到生产部署的全面指南
css·人工智能·自然语言处理·架构·ocr·个人开发
之歆1 天前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
ZC跨境爬虫2 天前
跟着 MDN 学CSS day_25:(高级区块效果)
前端·css·html·tensorflow·媒体