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>

效果

相关推荐
yume_sibai32 分钟前
CSS2 核心知识点完全总结(选择器 + 三大特性 + 常用属性)
前端·css
小刘在重生~2 小时前
Web 前端基础|HTML+CSS+JavaScript+Bootstrap
前端·css·html
吴长建先生重名了2 小时前
如何撩妹子实战:搞定StackTrace,面试必问的底层逻辑
css
是立不是利2 小时前
第二篇:CSS 与用户体验——看不见的设计
前端·css·ux
神膘护体小月半6 小时前
mask 渐变遮罩属性
前端·css·css3
用户850869276156 小时前
ecstore新手避坑指南:从零搭建电商项目实战
css
是立不是利20 小时前
写给设计师的 CSS 博客美学指南
前端·css
RuoyiOffice1 天前
SpringBoot3+Vue3 最推荐的开源 OA 系统 2026:流程驱动、资源闭环、多端互通
spring boot·vue3·flowable·oa·协同办公·spring boot 3·开源oa
labixiong1 天前
CSS 锚点定位实测:零 JS 实现气泡跟随,自动翻转很香但暗藏 3 个致命坑
前端·css
芳心粽伙饭1 天前
CSS第一章 CSS引入
前端·css