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>

效果

相关推荐
雨季mo浅忆1 小时前
首个Vue3项目边写边学边记
前端·vue3
feixing_fx7 小时前
选择器的威力——深入理解优先级计算与层叠规则
开发语言·前端·css·前端框架·html
星空9 小时前
html\css\js入门
javascript·css·html
晓得迷路了13 小时前
栗子前端技术周刊第 133 期 - Angular v22、React 编译器 Rust 版、pnpm 11.5...
前端·javascript·css
程序猿小泓13 小时前
2026 前端面试全攻略:手写题、算法与计网/TS 高频考点
前端·javascript·css
#麻辣小龙虾#1 天前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3
小小19921 天前
idea 配置less转化为css
前端·css·less
hhb_6181 天前
Less嵌套避坑:优先级冲突实战解析
前端·css·less
AI视觉网奇1 天前
three教学 3d资产拼接源代码
前端·css·css3
用户059540174461 天前
RAG 记忆层踩坑实录:用户偏好凭空消失,我排查了 4 小时,最后用 LangChain + Chroma 搭了套自动化回归测试
前端·css