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>
相关推荐
江号软件分享34 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架