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>

效果

相关推荐
NEXT062 小时前
那个写 width: 33.33% 的前端,终于被 flex: 1 拯救了
前端·css
NEXT062 小时前
前端即导演:用纯 CSS3 原力复刻《星球大战》经典开场
前端·css
棒棒的唐6 小时前
使用微信小程序版Vant的upload组件上传身份证的样式自定义方案(Css魔改版)
css·微信小程序·小程序
DEMO派6 小时前
CSS优先级规则以及如何提升优先级方案详解
前端·javascript·css·vue.js·reactjs·html5·angular.js
NEXT066 小时前
CSS基础-标准盒模型与怪异盒模型
前端·css
Sapphire~7 小时前
Vue3-10 ref与reactive创建响应式数据的区别
vue3
@Autowire7 小时前
CSS 中 px、%、vh、vw 这四种常用单位的区别
前端·css
怕浪猫7 小时前
React从入门到出门第七章 管理你的CSS 模块化样式控制方案
javascript·css·react.js
@Autowire7 小时前
CSS 中「继承属性」的核心知识,包括哪些属性可继承、继承的规则、如何控制继承(继承/取消继承)
前端·css
天天向上10247 小时前
css Grid常用布局
前端·css