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>

效果

相关推荐
程序员小寒3 小时前
前端性能优化之CSS篇
前端·css·性能优化
用户6600676685396 小时前
CSS定位全解析:从static到sticky,彻底搞懂布局核心
前端·css
panda49191 天前
css主流布局
前端·css
合作小小程序员小小店1 天前
web网页开发,在线%医院诊断管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·jdk·html·intellij-idea
软件技术NINI1 天前
html css js网页制作成品——html+css+js5 页 jk制服附源码
javascript·css·html
重铸码农荣光1 天前
从 0 到 1 实现 LocalStorage 待办清单:CSS 进阶 + 前端工程化思想实践
css·前端工程化
凌波粒1 天前
CSS基础详解(1)
前端·css
yqcoder2 天前
在 scss 中,&>div 作用
前端·css·scss
小马哥编程2 天前
这个variables.scss文件中$menuText:#bfcbd9;:export {menuText: $menuText; }的语法符合要求吗
前端·css·scss
爆浆麻花2 天前
为什么有些人边框不用border属性
前端·css