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>

效果

相关推荐
shuoshuohaohao6 分钟前
《CSS》
前端·css
用户0595401744644 分钟前
Redis持久化踩坑实录:RDB+AOF混合持久化,竟会悄无声息丢数据?我用pytest+Docker复现了30次故障场景
前端·css
anno1 小时前
一篇文章带你搞懂 CSS 选择器(带示例 + 对比 + 优缺点总结)
css
moMo1 小时前
# 从重置样式到 BEM 命名:写一个微信的按钮
前端·css
海市公约2 小时前
Vue3组合式API中watch传值生命周期与自定义Hook实战
vue3·生命周期·watch·props·组件通信·defineexpose·自定义hook
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_48:深入CSS多列布局——像报纸一样组织内容
前端·css·学习
weixin_427771614 小时前
css加载顺序导致本地和线上样式不一致
前端·css
ZC跨境爬虫11 小时前
跟着 MDN 学CSS day_41:显式轨道、隐式网格与区域命名放置
前端·javascript·css·ui·交互
小KK_17 小时前
CSS浮动布局指南:从文档流到BFC
前端·css·html
半个落月20 小时前
前端工程化第一步:BEM 国际命名规范与 CSS Reset 实战
前端·css