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>

效果

相关推荐
feixing_fx12 小时前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3
2603_9658966213 小时前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
进击的明明13 小时前
前端开发中的 BEM 国际命名规范:让 CSS 不再"打架"
前端·css·html
燕落南枝14 小时前
CSS 分组选择器与链接伪类选择器详解
前端·css
RuoyiOffice16 小时前
项目预算和交付日期变了,为什么不能直接改台账?
spring boot·项目管理·vue3·flowable·业务建模·ruoyi office·项目变更
溪语流沙19 小时前
【每天一个CSS | Day33】聚焦即弹出的命令面板
前端·css·html5·组件·每日一练
燕落南枝19 小时前
CSS 用户行为伪类::hover 与 :focus 详解
前端·css
AI源码1 天前
图书馆借阅管理系统
vue3·springboot
钱栈up1 天前
前端改了三页、后端也动了,用户说「完全没变化」——我在 116 库上找到的三个真凶
css·数据库
燕落南枝2 天前
CSS 字体样式:颜色、字体族、倾斜、加粗与装饰
前端·css