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>

效果

相关推荐
牧码岛5 分钟前
Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility
前端·css·vue·html·web·web前端
棉花糖超人3 小时前
【从0-1的CSS】第1篇:CSS简介,选择器已经常用样式
前端·css
potender4 小时前
前端基础学习html+css+js
前端·css·学习·html·js
Hilaku4 小时前
你以为的 Tailwind 并不高效,看看这些使用误区
前端·css·前端框架
Hilaku4 小时前
为什么越来越多 Vue 项目用起了 UnoCSS?
前端·css·html
中微子4 小时前
☀️这些CSS里的选择器你知道多少❓
css
Larcher4 小时前
css真难,那就从基础开始吧
前端·css
Linsk4 小时前
深入解析 Sass 的 `~` 路径问题:为什么你的导入会失败?
css·scss·前端工程化
站在风口的猪11085 小时前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5
ayuday7 小时前
stylus - 新生代CSS预处理框架
css·stylus