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>

效果

相关推荐
程序猿_极客3 小时前
【期末网页设计作业】HTML+CSS+JS 旅行社网站、旅游主题设计与实现(附源码)
javascript·css·html·课程设计·期末网页设计
q***58198 小时前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
振华OPPO19 小时前
Vue:“onMounted“ is defined but never used no-unused-vars
前端·javascript·css·vue.js·前端框架
J***Q2921 天前
前端CSS架构模式,BEM与ITCSS
前端·css
行走的陀螺仪1 天前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
qq_398586541 天前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
麦麦大数据1 天前
F046 新闻推荐可视化大数据系统vue3+flask+neo4j
python·flask·vue3·知识图谱·neo4j·推荐算法
Sheldon一蓑烟雨任平生2 天前
Vue3 高级性能优化
性能优化·vue3·tree-shaking·高级性能优化·首屏加载优化·更新优化·大型虚拟列表
一个打工仔的笔记2 天前
使用css实现打开抽屉效果(css过渡动画)
css
fruge2 天前
设计稿还原技巧:解决间距、阴影、字体适配的细节问题
前端·css