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>

效果

相关推荐
梨想橙汁1 小时前
CSS Grid 网格布局:二维布局神器,轻松实现复杂网页排版
前端·css
晴天162 小时前
CSS 预处理器深度解析-Day35
前端·css
小江的记录本3 小时前
【CSS】CSS 核心:盒模型、BFC/IFC、Flex/Grid 布局、响应式布局、移动端适配(附《思维导图》)
前端·css·面试·前端框架·tensorflow·html5·xss
小江的记录本3 小时前
【HTML】HTML5 新特性、语义化标签、浏览器渲染流程(附《思维导图》)
前端·css·面试·前端框架·html·css3·html5
ℋᙚᵐⁱᒻᵉ鲸落11 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
慧一居士16 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
慧一居士20 小时前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass
慧一居士1 天前
Less功能介绍和完整使用示例
css
右耳朵猫AI1 天前
Web前端周刊2026W34 | CSS类前缀选择器采纳、Lovable迁移TanStack Start、Fastify 6.0 Alpha
前端·css
我才是银古1 天前
当 360° 全景遇上真实地图:Vue 3 实现全景-地图双向联动的工程实践
3d·vue3·360影像