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>
相关推荐
jakeswang4 分钟前
查询条件与查询数据的ajax拼装
前端·ajax
samuel9185 分钟前
axios取消重复请求
前端·javascript·vue.js
三天不学习7 分钟前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
滿15 分钟前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧26 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快34 分钟前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point35 分钟前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel37 分钟前
webpack 核心编译器 十二 节
前端
好_快37 分钟前
Lodash源码阅读-baseToString
前端·javascript·源码阅读
好_快37 分钟前
Lodash源码阅读-initCloneByTag
前端·javascript·源码阅读