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>

效果

相关推荐
Mr Xu_4 小时前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
Lee川6 小时前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
哈里谢顿11 小时前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .11 小时前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
是梦终空12 小时前
计算机毕业设计264—基于Springboot+Vue3+协同过滤的房屋租赁管理系统(源代码+数据库+万字论文+设计文档)
spring boot·毕业设计·vue3·课程设计·毕业论文·协同过滤·房屋租赁管理系统
RFCEO1 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
夏幻灵2 天前
CSS三大特性:层叠、继承与优先级解析
前端·css
会编程的土豆2 天前
新手前端小细节
前端·css·html·项目
Irene19912 天前
通用消息组件 bug 修复及更好的实现是使用函数调用组件
vue3·函数调用·通用消息组件
珹洺2 天前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo