解决在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 ... 
随机推荐
- 背景 半透明问题 rgba  + filter
			<html style=" background: violet;"><head><meta charset="utf-8"> ... 
- html input元素
			1.单选框复选框 html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法:<input type= ... 
- "Incorrect string value: '\\xE7\\x89\\x8C\\xE5\\xB1\\x80...' for column 'name' at row 1")
			出现这个错误的原因是,数据库的编码格式为latin1 而我要将utf8的中文插入到数据库中. mysql> alter database xxx default character set ut ... 
- 15款Cocos2d-x游戏源码
			(1)用cocos2d-x开发的中国象棋游戏源码 使用Cocos2d-X2.2.3开发的一款中国象棋游戏,游戏中可以实现.新局面.悔棋.游戏音乐.胜利后会显示游戏结果. 源码下载:http://www ... 
- nw 系统托盘的添加方式,以及ajax失效问题
			1.nw 系统托盘的添加方式 /** ------------------------------------------------------------ 最小化托盘 -------------- ... 
- E - 追求
			经历了那晚的竹林深处相识后静竹对数学念念不忘,产生了好感!为了追求数学,她想到了一招,要想搞定女友,搞定闺中密友.于是,她秘密与数学的好友斐波那契见面了.学数学的真是不一样,斐波那契的出现前提也是需要 ... 
- C语言基础:初级指针                                                    分类:            iOS学习  c语言基础             2015-06-10 21:50    30人阅读    评论(0)    收藏
			指针:就是地址. & 取地址运算符 %p 打印地址占位符 int a=0; printf("%p ",&a); 指针变量:用来存放地址的变量 定义: ... 
- SpringAop与AspectJ
			AspectJ AspectJ是一个面向切面的框架,它扩展了Java语言.AspectJ定义了AOP语法,所以它有一个专门的编译器用来生成遵守Java字节编码规范的Class文件. spring ao ... 
- 查看linux安装包的版本信息-TX2
			前言 新到手一块TX2板子,想要检查系统是否安装某软件及其版本. 操作命令 Cuda8.:nvcc --version Opencv:pkg-config --modversion opencv G+ ... 
- Nuxt.js实践篇
			nuxt.js 追求完美,相信大家都是这样的.因为前后端分离的弊端性,在项目构建时,浏览器并不会捕捉到项目的内容,所以开始,笔者决定引入nuxt.js文件来配合vue完成Server Slider R ... 
