解决在sass中使用calc不能包含变量的问题。
今天写sass的时候,发现在sass中使用calc,如果calc中包含一个变量,不会产生效果,看代码:
.app-inner {
display: flex;
height: calc(100% - $topbar-height);
}
在浏览器中没有产生效果:

可以看到sass并没有解析这个$topbar-height。
最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable})。
所以把代码改正下面的形式就可以了:
.app-inner {
display: flex;
height: calc(100% - #{$topbar-height});
}
在浏览器中可以看到这个变量被解析了:

issue地址: https://github.com/sass/sass/issues/2166#issuecomment-254511098
解决在sass中使用calc不能包含变量的问题。的更多相关文章
- use_frameworks!和#use_frameworks!的区别、解决Swift项目中use_frameworks!冲突的问题
use_frameworks!和#use_frameworks!的区别 转自:https://www.jianshu.com/p/0ae58a477459 1. 用cocoapods 导入swift ...
- 在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句
在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句 突然看到这个问题,脑袋一蒙,不知道啥意思,后来想想,试图把select里的选项放到后面,问题自然解决! 下面这 ...
- less中使用calc
css3中可以使用calc()来实现自适应布局 例如:width:“calc(100% - 25px)” width: calc(expression); ==> expression是一个表 ...
- 解决ASP.NET中的各种乱码问题
解决ASP.NET中的各种乱码问题 阅读目录 开始 页面显示乱码问题 AJAX提交的数据乱码问题 JavaScript中正确的URL编码方式 ASP.NET中正确的URL编码方式 正确的URL编码方式 ...
- 【docker】【redis】2.docker上设置redis集群---Redis Cluster部署【集群服务】【解决在docker中redis启动后,状态为Restarting,日志报错:Configured to not listen anywhere, exiting.问题】【Waiting for the cluster to join...问题】
参考地址:https://www.cnblogs.com/zhoujinyi/p/6477133.html https://www.cnblogs.com/cxbhakim/p/9151720.htm ...
- 解决URL地址中的中文乱码问题的办法
解决URL地址中的中文乱码问题的办法 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生 ...
- iOS解决json串中的NSNull类型
iOS解决json串中的NSNull类型 后端返回的数据中总会出现一些NSNull类型,当我们一处理程序就会崩溃,因此想到把返回的数据中的NSNull类型全部转换成@""空字符 ...
- 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法
如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...
- Sass中连体符(&)的运用
在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor ...
随机推荐
- 51nod1563
题解: 其实只要排个序贪心一下就好了...代码600B不到... 代码: #include<bits/stdc++.h> using namespace std; ,INF=1e9; in ...
- oracle之TRUNC函数
TRUNC(number,num_digits) Number 需要截尾取整的数字. Num_digits 用于指定取整精度的数字.Num_digits 的默认值为 0.如果Num_digits为正数 ...
- 一张图告诉你为何必须学Python?
互联网行业的薪资高.发展前景好,已经是人尽皆知的事了.越来越多的人对编程有了兴趣,想通过加入大公司实现人生逆袭,我们身边也涌现出了一些从零学习.变身大神的励志故事. 但更多的人还是选择观望:有人觉得编 ...
- DevExpress v17.2新版亮点—.NET Reporting篇(二)
用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了.NET Reporting v17.2 的新功能,快来下载试用新版本! 支持AS ...
- SQL 递归找查所有子节点及所有父节
在SQL的树型结构中,很多时候,知道某一节点的值,需要查找该节点的所有子节点(包括多级)的功能,这时就需要用到如下的用户自定义函数. 表结构如下: ID int Dep_Type int Dep_Co ...
- 【笔记】《深入浅出MFC》第6章 MFC程序的生死因果
一.头文件说明 STDAFX.H 这个文件用来作为Precompile header file,其内只是载入其他的MFC头文件.应用程序通常会准备自己的头STDAFX.H. AFXWIN.H 每一个W ...
- 官网下载的spring-framework的一些描述
刚下载下来是这个文件夹:
- xampp for mac 本地服务器的使用
1.下载xampp安装包 ,百度搜索下载合适版本安装包 2. 安装.下一步 ...->完成 3. 打开看到xampp启动页面. 打开你安装的路径:我这里的路径是:C:\xampp: 找见xamp ...
- Alpha阶段敏捷冲刺---Day3
一.Daily Scrum Meeting照片 二.今天冲刺情况反馈 今天我们上完课后在禹洲楼教室外进行我们的每日立会.开会的内容主要是总结了一下这几天各自的任务及任务进度,交流了一下各自遇到的困难. ...
- 在vmware中实现Ubuntu与win7(主机)之间同步实现共享文件
作为linux的热衷者和初学者,我们在学习的过程中难免会碰到不少的问题,下面简单的介绍和总结一下,我是如何通过以下两种方法解决在vmware中实现Ubuntu与win7(主机)之间同步实现共享文件的. ...