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>

效果

相关推荐
用户0595401744611 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
cll_86924189120 小时前
一个好看的Wordpress博客文字css样式
前端·css·ui
三翼鸟数字化技术团队20 小时前
一种前端大屏适配方案
前端·css
布兰妮甜21 小时前
从 0 搭建企业级 Vue3/Vite 脚手架(规范、eslint、husky、打包、环境变量全流程)
typescript·vue3·vite·脚手架·前端工程化
muddjsv21 小时前
CSS核心语法精讲:彻底吃透规则结构、选择器与声明规范
前端·css
触底反弹1 天前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
小白巨白1 天前
玫瑰花园管理系统:AI识病+3D可视化,一套面向中小型玫瑰种植园的数字化管理工具
css·人工智能·计算机视觉·html5
gis开发之家2 天前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
alexander0682 天前
CSS 类选择器组合
前端·css
HexCIer3 天前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite