今天写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. MySQL 5.7 分区表性能下降的案例分析

    转载自:https://mp.weixin.qq.com/s/K3RpSBAIWFwGCIWyfF0QPA 前言:希望通过本文,使MySQL5.7.18的使用者知晓分区表使用中存在的陷阱,避免在该版本 ...

  2. iOS多线程编程:线程同步总结

    1:原子操作 - OSAtomic系列函数 iOS平台下的原子操作函数都以OSAtomic开头,使用时需要包含头文件<libkern/OSBase.h>.不同线程如果通过原子操作函数对同一 ...

  3. docker容器,镜像常用操作

    1.查看正在运行的容器 docker ps 查看所有容器 docker ps -a 2.查看容器日志 docker logs -f showdoc 3.删除所有容器 docker rm $(docke ...

  4. php 跳出循环的几种方式

    PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式: <?php$i = 1;whil ...

  5. 麻省理工大学新发明:暗黑WiFi透视技术

    美国麻省理工学院(MIT)宣布,该大学的研究人员开发出了一种可以通过WiFi信号来检测人体移动情况的系统(Wi-Vi).据MIT介绍,该系统可以检测出钢筋混凝土墙壁背后的人体移动情况,其未来可以被作为 ...

  6. .Net EF Core数据库使用SQL server 2008 R2分页报错How to avoid the “Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement.”

    一.  问题说明 最近.Net EF core 程序部署到服务器,服务器数据库安装的是SQL server 2008 R2,我本地用的的是SQL server 2014,在用到分页查询时报错如下: H ...

  7. layer弹出相册层

    如果想要制作一个简单的相册,可以采用这个插件的方法.如果你的图片是从后台传过来的json格式里,可以通过ajax加载让图片显示在页面上,然后在使用layer插件,做出点击以后就可以查看大图的效果. 一 ...

  8. NBUT 1217 Dinner 2010辽宁省赛

    Time limit  1000 ms Memory limit  32768 kB Little A is one member of ACM team. He had just won the g ...

  9. 算法训练 Lift and Throw

    算法训练 Lift and Throw   时间限制:3.0s   内存限制:256.0MB      问题描述 给定一条标有整点(1, 2, 3, ...)的射线. 定义两个点之间的距离为其下标之差 ...

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

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