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>

效果

相关推荐
CarIise1 天前
事件传播、CSS动画、服务器字体与jQuery
服务器·css·jquery
XLYcmy1 天前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
风月说与山鬼1 天前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
风月说与山鬼1 天前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
里欧跑得慢1 天前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
晓得迷路了1 天前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css
CarIise2 天前
下拉菜单HTML/CSS/JS实现
前端·css
里欧跑得慢2 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
烂蜻蜓3 天前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
夏炳辉.3 天前
Flex布局中 flex: 1 的完整解析与实战指南
前端·css·css3