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>

效果

相关推荐
之歆7 小时前
DAY08_CSS浮动与行内块布局实战指南(下)
前端·css
yqcoder8 小时前
CSS Position 全解析:5 种定位模式详解
前端·css
之歆8 小时前
DAY08_CSS浮动与行内块布局实战指南(上)
前端·css
rockey62710 小时前
基于AScript的python3脚本语言发布啦!
python·c#·.net·script·python3·eval·expression·function·动态脚本
yqcoder15 小时前
端经典面试题:为什么 0.1 + 0.2 !== 0.3?
前端·css
ZC跨境爬虫15 小时前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)
前端·javascript·css·ui·html
用户0595401744615 小时前
大模型记忆存储踩坑实录:LangChain 的 ConversationBufferMemory 让我排查了 6 小时
前端·css
剑神一笑18 小时前
CSS Animation Timeline 可视化动画编辑器:从关键帧到流畅动画
前端·css·编辑器
2401_8784545319 小时前
HTML和CSS的复习2
前端·css·html
We་ct19 小时前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器