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

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

 width: calc(100% - #{$topbar});

sass 使用clac的问题的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

随机推荐

  1. asp 月末 月初

    上个月第一天:<%=dateadd("m",-1,year(date)&"-"&month(date)&"-1" ...

  2. 通俗理解 MVC , MVVM

    MVC 也就是Model-View-Controller 的缩写,就是 模型-视图-控制器 : Model :管理数据 View :视图展示 Controller :响应用户操作,并将 Model 更 ...

  3. 关于 Thread.currentThread()

    currentThread()  到底是什么? 其实currentThread() 只是Thread 的一个静态方法.返回的正是执行当前代码指令的线程引用: /** * Returns a refer ...

  4. Dubbo(1)--初识Dubbo

    1. 为什么需要 Dubbo 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当 ...

  5. yum-cron更新 CentOS yum update 不升级内核版本方法

    http://www.360doc.com/content/15/0608/17/15798950_476597844.shtml 相关yum-cron说明有一些 CentOS yum update ...

  6. 混合式应用真机调试(Android Studio + Chrome)

    如何在chrome上调试混合式APP https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ Get Sta ...

  7. django之block extend标签

    class ExtendsNode(Node): must_be_first = True context_key = 'extends_context' def __init__(self, nod ...

  8. twisted的DelayedCall

    >>> l=[,,,,] >>> del l[:]#只是删除列表的部分元素,列表仍然存在 >>> l [, ] #reactor循环执行的函数de ...

  9. Swoole 进程管理

    用法: $process = new swoole_process(function(){ //这里写业务代码 },true) //开启进程,返回进程pid $pid = $process->s ...

  10. <基础> PHP 进阶之 抽象类(abstract)、接口(interface)、Trait(特征)

    抽象类 PHP 5 支持抽象类和抽象方法.定义为抽象的类不能被实例化. 抽象方法只能在抽象类中,抽象类中可以包含非抽象方法 被定义为抽象的方法只是声明了其调用方式(参数),不能定义其具体的功能实现 继 ...