解决在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 ...
随机推荐
- poj 1163 The Triangle 搜索 难度:0
The Triangle Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37931 Accepted: 22779 De ...
- jquery ajax和php实现返回值 json类型
js页面 $.ajax({ type: “POST”, dataType: ‘json’, url: “add_vote.php”, data: “touid=”+uid+”&touserna ...
- 一个在windows电脑上控制比较全的文件夹的设置方式
一个在windows电脑上控制比较全的文件夹的设置方式: 1.在桌面上创建一个新建文件夹 2.将新建文件夹重命名为 万能控制模式.{ED7BA470-8E54-465E-825C-99712043E ...
- BeanFactory工厂
Core模块主要的功能是实现了反向控制(Inversion of Control)与依赖注入(Denpendency Injection).Bean配置以及加载. Beans为Spring里的各种对象 ...
- Exchange Server 2007 多名称证书配置(转载)
原文:http://www.exchangecn.com/exchange2007/20141130_529.html Exchange Server 2007 多名称证书配置 Exchange ...
- apache的日志access_log分析
正常日志格式:客户端地址 访问者的标识 访问者的验证名字 请求的时间 请求类型 请求的HTTP代码 发送给客户端的字节数 当网站出问题时分析日志,第一步一般都不会是看访问日志.但是也不能忽视它,在 ...
- Bad update sites
Bad update sites com.genuitec.pulse2.client.common.launcher.BadUpdateSiteException Software being in ...
- 部署python3.6下的django
首先是安装好nginx,配置web目录,配置文件在confi.d中, server { # the port your site will be served on listen ; # the do ...
- windows server 账号克隆
在dos命令行下隐藏用户的方法: net user 账户 密码 /add 如果在账号后加 $ 符号 这个账户在cmd命令行下是无法看见的 首先我们设置注册表权限 cmd = > regedt ...
- 重构Tips
一,重新组织函数1.首先找出局部变量和参数. 1>任何不会被修改的变量都可以当作参数传入.2.去掉临时变量Replace Temp with Query.用查询函数代替临时变量3.Extract ...