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>

效果

相关推荐
触底反弹8 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
小白巨白12 小时前
玫瑰花园管理系统:AI识病+3D可视化,一套面向中小型玫瑰种植园的数字化管理工具
css·人工智能·计算机视觉·html5
gis开发之家16 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
alexander0681 天前
CSS 类选择器组合
前端·css
HexCIer2 天前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
华玥作者2 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
用户059540174462 天前
把大模型记忆回归测试从手工检查换成 Playwright+VCR,误判率从 40% 降到 0
前端·css
breeze jiang2 天前
从零搭建浏览器端 AI 原型:React、WebGPU 与 Tailwind CSS 的一次实践
css·人工智能·react.js
不好听6132 天前
Tailwind CSS 原子化 CSS 完全入门:为什么现代前端开发都在用?
前端·css
奇牙coding3 天前
gpt-5.6-sol 接入指南:reasoning_effort 参数配置、推理链验证与常见报错排查
前端·css·gpt·ai