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>

效果

相关推荐
平头哥~14 小时前
Day 07 _ 那条 1px 的线,为什么在手机上忽粗忽细
前端·css·样式·学习资料
rockey62714 小时前
AScript之编译递归函数
c#·.net·script·动态脚本
小江的记录本14 小时前
【CSS】CSS 动画:transition、animation、transform、CSS3 新特性(附《思维导图》)
前端·css·安全·spring·前端框架·css3·动画
梨想橙汁1 天前
CSS Grid 网格布局:二维布局神器,轻松实现复杂网页排版
前端·css
晴天161 天前
CSS 预处理器深度解析-Day35
前端·css
小江的记录本1 天前
【CSS】CSS 核心:盒模型、BFC/IFC、Flex/Grid 布局、响应式布局、移动端适配(附《思维导图》)
前端·css·面试·前端框架·tensorflow·html5·xss
小江的记录本1 天前
【HTML】HTML5 新特性、语义化标签、浏览器渲染流程(附《思维导图》)
前端·css·面试·前端框架·html·css3·html5
ℋᙚᵐⁱᒻᵉ鲸落2 天前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
慧一居士2 天前
Vite项目中使用Less步骤,详细使用示例
前端·css
慧一居士2 天前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass