解决在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 ...
随机推荐
- learning docker steps(5) ----- docker stack 初次体验
参考:https://docs.docker.com/get-started/part5/ stack 技术栈.技术栈是一组相关的服务,它们共享依赖项并且可以一起进行编排和扩展.单个技术栈能够定义和协 ...
- <NET CLR via c# 第4版>笔记 第11章 事件
11.1 设计要公开事件的类型 11.1.1 第一步: 定义类型来容纳所有需要发送给事件通知接收者的附加信息 //第一步:定义一个类型来容纳所有应该发送给事件通知接收者的附加信息 internal c ...
- SharePoint场管理-PowerShell(一)
1. 查看场配置信息 Get-SPFarmConfig 2. 设置场配置信息 Set-SPFarmConfig –ASPScriptOptimizationEnabled:$true –DataFor ...
- Java Socket 实现HTTP服务器核心
原文链接:http://www.ihuxu.com/p/235.html 首先了解下HTTP协议: wikiPedia的说明很好,在此不重复了.链接:http://zh.wikipedia.org ...
- iOS开发多线程篇—GCD简介
iOS开发多线程篇—GCD介绍 一.简单介绍 1.什么是GCD? 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 2.GCD的优势 G ...
- (转)spring hibernate properties详解
转载地址:http://blog.sina.com.cn/s/blog_692d0a650100xyqx.html Hibernate配置属性 hibernate.dialect:一个Hibernat ...
- FlytestingToolkit工具派送,懒人的测试思考
工欲善其事必先利其器,在IT路上摸爬这些年,去年我们分享了<Fiddler录制jmeter脚本,干货分享>,今天我们有另外的思考,我懒,故我思考. 下载解压后是这样的: 双击 Flytes ...
- iview Model对话框点击确定后iview会自动关闭窗口
问题描述:在某个页面需打开一个Model,然后这个Model里有一个Form表单,点击确定时我需要先校验表单数据是否输入正确,不确定则不希望关闭窗口:(问题是:只要点击确认 loading :fals ...
- 《Hands-On Machine Learning with Scikit-Learn&TensorFlow》读书笔记
一 机器学习概览 机器学习的广义概念是:机器学习是让计算机具有学习的能力,无需进行明确编程. 机器学习的工程性概念是:计算机程序利用经验E学习任务T,性能是P,如果针对任务T的性能P随着经验E不断增长 ...
- MySQL性能优化方法二:表结构优化
原文链接:http://isky000.com/database/mysql-perfornamce-tuning-schema 很多人都将 数据库设计范式 作为数据库表结构设计“圣经”,认为只要按照 ...