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>

效果

相关推荐
胖者是谁13 小时前
EasyPlayerPro的使用方法
前端·javascript·css
i小溪16 小时前
Easy (Horizontal Scrollbar) Fixes for Your Blog CSS 博客 CSS 的简易(水平滚动条)修复
css
donecoding19 小时前
Sass 模块化革命:告别 @import,拥抱 @use 和 @forward
前端·css·代码规范
迦南giser21 小时前
webpack从0到1详解
前端·javascript·css·webpack·node.js
华玥作者21 小时前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
冴羽1 天前
现代 CSS 颜色使用指南
前端·javascript·css
float_六七1 天前
CSS行内盒子:30字掌握核心特性
前端·css
donecoding1 天前
CSS的"双胞胎"陷阱:那些看似对称却暗藏玄机的属性对
前端·css·代码规范
未来之窗软件服务1 天前
幽冥大陆(九十九)文件大小换算+软考—东方仙盟练气期
css·html·css3·计算机软考·仙盟创梦ide·东方仙盟
thinkQuadratic1 天前
CSS给文本添加背景颜色等效果
前端·css