scss 使用变量名注意事项

variables.module.scss 文件

css 复制代码
$navHeight: 50px;
:export {
    $navHeight: $navHeight;
}

vue文件引用

  • js中获取scss文件变量名需将文件名改为.module.scss
  • scss的calc函数中使用变量需插值形式
html 复制代码
<style lang="scss" scoped>
@import "~@/styles/variables.module.scss";

.app-main {
  height: calc(100vh - #{$navHeight});//scss的calc函数中使用变量需插值形式
}
</style>
html 复制代码
<script>
import variables from "@/styles/variables.module.scss";//命名带.module文件可以js获得变量名
</script>
相关推荐
蜗牛快跑123几秒前
github 源码阅读神器 deepwiki,自动生成源码架构图和知识库
前端·后端
嘻嘻嘻嘻嘻嘻ys2 分钟前
《Vue 3.4响应式超级工厂:Script Setup工程化实战与性能跃迁》
前端·后端
장숙혜5 分钟前
ElementUi的tabs样式太难修改,自定义tabs标签页
前端·javascript
用户21411832636026 分钟前
dify案例分享-魔搭+Dify王炸组合!10分钟搭建你的专属 生活小助理
前端
工呈士6 分钟前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
WEI_Gaot9 分钟前
zustand 基础和进阶
前端·react.js
程序员Qian12 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户20311966009613 分钟前
sheet的基本用法
前端
火星思想19 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
杨进军23 分钟前
MutationObserver 实现 iframe 自适应高度
前端