今天写sass的时候,发现在sass中使用calc,如果calc中包含一个变量,不会产生效果,看代码:

  1. .app-inner {
  2. display: flex;
  3. height: calc(100% - $topbar-height);
  4. }

在浏览器中没有产生效果:

可以看到sass并没有解析这个$topbar-height。

最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable})。

所以把代码改正下面的形式就可以了:

  1. .app-inner {
  2. display: flex;
  3. height: calc(100% - #{$topbar-height});
  4. }

在浏览器中可以看到这个变量被解析了:

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. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 若所有的参数皆需要类型转换——请为此采用non-member函数

    若所有的参数皆需要类型转换--请为此采用non-member函数 经常使用C++的程序猿(希望更多的程序媛),一般不会同意让classes支持类型转换,至于为什么,请看后续的博客.假如我们设计一个表示 ...

  3. 吐血推荐:罗马尼亚无版权VPS服务商HostSolutions评测-绝对真实

    要放心大胆的玩 VPS,要找性价比高.信用好,服务稳定,限制少的服务商是很不容易的.这里我先点几个黑名单:第一类 HiFormance.VirMach 低价流 VPS 服务商,以低从吸引消费者.俗话说 ...

  4. CUDA ---- Memory Model

    Memory kernel性能高低是不能单纯的从warp的执行上来解释的.比如之前博文涉及到的,将block的维度设置为warp大小的一半会导致load efficiency降低,这个问题无法用war ...

  5. 0122有关List、Set、Map的练习

    import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; public class SZYL { ...

  6. UI基础:UITextField 分类: iOS学习-UI 2015-07-01 21:07 68人阅读 评论(0) 收藏

    UITextField 继承自UIControl,他是在UILabel基础上,对了文本的编辑.可以允许用户输入和编辑文本 UITextField的使用步骤 1.创建控件 UITextField *te ...

  7. javascript 处理鼠标右键事件

    使用右键事件 在需要右键的地方加上  onmousedown="if(event.button == 2) alert('点击右键了!');即可   不经意地被一位同事问起在javascri ...

  8. 最小二乘法 及 梯度下降法 运行结果对比(Python版)

    上周在实验室里师姐说了这么一个问题,对于线性回归问题,最小二乘法和梯度下降方法所求得的权重值是一致的,对此我颇有不同观点.如果说这两个解决问题的方法的等价性的确可以根据数学公式来证明,但是很明显的这个 ...

  9. HihoCoder - 1794:拼三角形 (状压DP)

    描述 给定 n 根木棍,第 i 根长度为 ai 现在你想用他们拼成尽量多的面积大于 0 的三角形,要求每根木棍只能被用一次,且不能折断 请你求出最多能拼出几个 输入 第一行一个正整数 n 第二行 n ...

  10. js窗口拖动 模版

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...