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>

效果

相关推荐
晓得迷路了2 小时前
栗子前端技术周刊第 131 期 - pnpm 11.3、npm 11.16.0、Astro 6.4...
前端·javascript·css
要写代码20 小时前
2026-Css忘掉一切、归零再启
css
罗超驿21 小时前
9.零基础学CSS:元素属性设置(字体、颜色、对齐等)全解析
前端·css
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_34:(CSS 布局全面解析)
前端·css·ui·html·tensorflow
聆风吟º1 天前
【Python编程日志】Python基础语法:常量 | 表达式 | 变量
开发语言·python·变量·常量·表达式
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_32:(Web字体深度解析与实践指南)
前端·javascript·css·ui·html
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_35:浮动布局完全指南
前端·css·ui·html·tensorflow
宏笋1 天前
qss/css 样式中margin和padding的作用和区别
css·qt
ZC跨境爬虫2 天前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
哆来A梦没有口袋2 天前
干货精讲 | 初级CSS面试高频考题
前端·css·面试