解决在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 ...
随机推荐
- oracle创建dblink方法
当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据.下面讲介绍如何在本地数 ...
- harbor私有镜像仓库的搭建与使用与主从复制
harbor私有镜像仓库,私有仓库有两种,一种是harbor,一种是小型的私有仓库,harbor有两种模式,一种是主 从,一种是高可用仓库,项目需求,需要两台服务器,都有docker.ldap权限统一 ...
- [转载]oracle游标概念讲解
原文URL:http://www.2cto.com/database/201203/122387.html ORACLE游标概念讲解 什么是游标? ①从表中检索出结果集,从中每次指向一条记录进行交互 ...
- Memcached 扩展常用方法
保存数据 向memcached保存数据的方法有 add replace set 它们的使用方法都相同: $add = $memcached->add( '键', '值', '期限' ); $re ...
- 201621123010《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出现 ...
- L236
The Norwegian Authority for Investigation of Economic and Environmental Crime (Okokrim) said the mov ...
- 务实java基础之集合总结
Java 提供了容纳对象(或者对象的句柄)的多种方式.其中内建的类型是数组,此外, Java 的工具库提供了一些 "集合类",利用这些集合类,我们可以容纳乃至操纵自己的对象. 声明 ...
- OC基础:数组.字典.集 分类: ios学习 OC 2015-06-18 18:58 47人阅读 评论(0) 收藏
==============NSArray(不可变数组)=========== NSArray,继承自NSObject 用来管理(储存)一些有序的对象,不可变数组. 创建一个空数组 NSArray ...
- Vue.js使用v-show和v-if的注意事项
这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍,而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项,有需要的朋友们可以参考借鉴,下面来一起看 ...
- GET_DDL提取建表语句:ddl
创建对象的语句就是了 提取表 set line 200 pages 50000 wrap on long 999999 serveroutput on SQL> select dbms_meta ...