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>

效果

相关推荐
软件技术NINI2 小时前
美妆商城html+Css+js 4页
javascript·css·html
2603_965896628 小时前
Grid 网格布局|CSS 二维页面排版体系
前端·css
多喝水身体棒9 小时前
# CSS Grid布局入门,二维布局再也不用float了
css
软件技术NINI11 小时前
化妆品html+css+js 7页
javascript·css·html
kaixin_learn_qt_ing13 小时前
hexdump -C /path/to/binary | less 看十六进制内容
前端·css·less
damoluomu15 小时前
SSG 的后台怎么补:Node.js 生态里的三条路(番外二)
javascript·css·typescript·node.js·html
溪语流沙15 小时前
【每天一个CSS | Day23】边框上有一道光在跑的流光呼吸卡片
前端·css
RuoyiOffice15 小时前
SpringBoot3+Vue3 员工全生命周期:入转调离如何衔接账号、权限、资产与交接
spring boot·vue3·权限管理·员工管理·hrm·ruoyi office·人事变更
ShineWinsu16 小时前
对于CSS:选择器的解析
前端·css·面试·html·web·选择器·网页
keyipatience16 小时前
CSS 学习(1):语法、引入方式、选择器、字体与背景
前端·css·html