今天写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不能包含变量的问题。的更多相关文章

  1. use_frameworks!和#use_frameworks!的区别、解决Swift项目中use_frameworks!冲突的问题

    use_frameworks!和#use_frameworks!的区别 转自:https://www.jianshu.com/p/0ae58a477459 1. 用cocoapods 导入swift ...

  2. 在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句

    在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句  突然看到这个问题,脑袋一蒙,不知道啥意思,后来想想,试图把select里的选项放到后面,问题自然解决!   下面这 ...

  3. less中使用calc

    css3中可以使用calc()来实现自适应布局 例如:width:“calc(100%  - 25px)” width: calc(expression); ==> expression是一个表 ...

  4. 解决ASP.NET中的各种乱码问题

    解决ASP.NET中的各种乱码问题 阅读目录 开始 页面显示乱码问题 AJAX提交的数据乱码问题 JavaScript中正确的URL编码方式 ASP.NET中正确的URL编码方式 正确的URL编码方式 ...

  5. 【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 ...

  6. 解决URL地址中的中文乱码问题的办法

    解决URL地址中的中文乱码问题的办法 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生 ...

  7. iOS解决json串中的NSNull类型

    iOS解决json串中的NSNull类型   后端返回的数据中总会出现一些NSNull类型,当我们一处理程序就会崩溃,因此想到把返回的数据中的NSNull类型全部转换成@""空字符 ...

  8. 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法

    如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...

  9. Sass中连体符(&)的运用

    在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor ...

随机推荐

  1. gitlba的搭建与使用

    实验环境继续使用git的实验环境,详情请点击连接https://www.cnblogs.com/cash-su/p/10131632.html 首先给服务器做一个本机的映射 [root@git1 ~] ...

  2. python 安装 scapy windows 10 64bit

    简介: 前段时间装的pypcap做嗅探.打包受阻.因为我都是在windows做的.也要打包到exe给别人用. 所以尝试了一下scapy,也可以嗅探,貌似功能更强大.先用sniff吧. 这个也不是在ve ...

  3. Java 线程面试题 Top 50

    --> Java 线程面试题 Top 50 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1. ...

  4. L1-017 到底有多二

    一个整数“犯二的程度”定义为该数字中包含2的个数与其位数的比值.如果这个数是负数,则程度增加0.5倍:如果还是个偶数,则再增加1倍.例如数字-13142223336是个11位数,其中有3个2,并且是负 ...

  5. Flappy Bird背后的故事

    更多有价值的互联网文章:晓煦分享(http://www.ihuxu.com/share) 由越南游戏工程师阮哈东(Nguyen Ha Dong)开发的Flappy Bird这款游戏,画面不算精致且看起 ...

  6. c# winform 中DataGridView绑定List<T> 不能显示数据

    遇到问题 DataGridView绑定List后,List更新后再次绑定不显示数据 datagridview 绑定数据源的时候 用List是不能显示修改内容的..要用binginglist<T& ...

  7. C#如何提取.txt文件中的每个字符串

    C#如何提取.txt文件中的每个字符串,并将其存放到一个类中. 将其中的编号 菜名 价格 分别存入不同的数组中. 注:在用ReadLine读取一行信息时为什么读取的中文字符变成了乱码. 20 满意答案 ...

  8. nodejs tutorials

    设置npm的镜像为淘宝镜像 npm config list npm config set registry " https://registry.npm.taobao.org "

  9. 第八章 Redis数据库结构与读写原理

    注:本文主要参考自<Redis设计与实现> 1.数据库结构 每一个redis服务器内部的数据结构都是一个redisDb[],该数组的大小可以在redis.conf中配置("dat ...

  10. Springboot整合pagehelper分页

    一.在pom中添加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId&g ...