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>

效果

相关推荐
抓不住时间的沙6 小时前
Butterfly主题 5.7 导航栏添加相册同时设置相册入口密码
css·python·node.js
我家猫叫佩奇7 小时前
🦭 厌倦了千篇一律的线性图标?Naive Icons 正式开源
前端·javascript·css
無限進步D9 小时前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
是立不是利12 小时前
CSS 入门与进阶:从选择器到响应式布局的完整指南
前端·css
無限進步D14 小时前
VSCode 简介+安装+JavaWeb前端常用插件+简单配置
java·开发语言·css·vscode·html·css3·插件
RuoyiOffice15 小时前
SpringBoot3+Vue3 项目立项到甘特:审批冻结台账、任务树怎么汇进度
spring boot·项目管理·vue3·甘特图·wbs·spring boot 3·立项审批
Solara1 天前
中文字体子集化实录:3.2MB → 200KB 的完整脚本、踩坑清单与三条反直觉经验
前端·css·架构
CoderYanger2 天前
Java EE 进阶:2.3 JavaScript
java·开发语言·前端·javascript·css·职场和发展·java-ee
芳心粽伙饭2 天前
CSS第四章 布局
前端·css·html
CoderYanger2 天前
Java EE 进阶:2.3 JavaScript 综合案例
java·前端·javascript·css·职场和发展·java-ee·html