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>
相关推荐
RoyLin几秒前
TypeScript设计模式:备忘录模式
前端·后端·typescript
阿笑带你学前端几秒前
Flutter本地通知系统:记账提醒的深度实现
前端·flutter
RoyLin8 分钟前
TypeScript设计模式:仲裁者模式
前端·后端·typescript
子兮曰12 分钟前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
瑶琴AI前端13 分钟前
【零成本高效编程】VS Code必装的5款免费AI插件,开发效率飙升!
前端·ai编程·visual studio code
forever_Mamba13 分钟前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
_AaronWong14 分钟前
实现一个鼠标滚轮横向滚动需求
前端·electron
子兮曰15 分钟前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
Olrookie15 分钟前
ruoyi-vue(十五)——布局设置,导航栏,侧边栏,顶部栏
前端·vue.js·笔记
召摇17 分钟前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js