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>

效果

相关推荐
用户938515635072 小时前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript
莫问ABC13 小时前
HTML、CSS、JavaScript 前端三件套
前端·css·html
fangzhanpeng16814 小时前
(前端)5.盒子模型的宽高和边距
前端·javascript·css
用户0595401744615 小时前
把大模型记忆召回测试从 30 分钟手工核对压到 3 秒自动化,pytest + FAISS 这套组合救了我
前端·css
可视之道1 天前
CSS Container Queries 在组态大屏中的实战
css
RuoyiOffice2 天前
SpringBoot3+Vue3 接口访问日志实战:@ApiAccessLog 慢接口、参数脱敏与 OperateLog 如何分工
spring boot·vue3·traceid·spring boot 3·访问日志·apiaccesslog·操作日志
tryCbest2 天前
Vue3项目在Nginx中配置代理后端IP
nginx·vue3
雪碧聊技术2 天前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
小妖6662 天前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
柚yuzumi3 天前
CSS 定位布局:让元素各就各位
前端·css