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>
相关推荐
请叫我欧皇i14 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_16 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun22 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02043 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing3 小时前
React核心功能详解(一)
前端·react.js·前端框架