最后在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. 爬取猫眼电影TOP100

    本文所讲的爬虫项目实战属于基础.入门级别,使用的是Python3.5实现的. 本项目基本目标:在猫眼电影中把top100的电影名,排名,海报,主演,上映时间,评分等爬取下来 爬虫原理和步骤 爬虫,就是 ...

  2. 《C++数据结构-快速拾遗》 基础常识

    1.命名空间函数 namespace wjy { void print() { cout<<"; } int load(int num) { return num; } } us ...

  3. Java file方法的路径特性

    1.在flle方法里,直接写空白的路径,是会默认获取当前Java编译工作空间的路径. 例子如下: package example_1; import java.io.File; import java ...

  4. nodejs多语句查询

    执行多条查询语句 为了安全起见,默认情况下是不允许执行多条查询语句的.要使用多条查询语句的功能,就需要在创建数据库连接的时候打开这一功能: var connection = mysql.createC ...

  5. wgrib读grib数据

    该文章来自博客:http://windforestwing.blog.163.c ... 412007103084743804/如有错误 ,大家及时指出啊!ps:meteoinfo可以直接处理grib ...

  6. ant 标签详解

    Ant 开发 Ant的构建文件当开始一个新的项目时,首先应该编写Ant构建文件.构建文件定义了构建过程,并被团队开发中每个人使用.Ant构建文件默认命名为build.xml,也可以取其他的名字.只不过 ...

  7. cmd批处理命令及powershell

    https://blog.csdn.net/wenzhongxiang/article/details/79256937 Powershell查询IP地址及主机名信息:1.foreach($ipv4  ...

  8. Dagger2使用

    初衷 Dagger2的初衷就是通过依赖注入让你少些很多公式化代码,更容易测试,降低耦合,创建可复用可互换的模块.你可以在Debug包,测试运行包以及release包优雅注入三种不同的实现. 依赖注入 ...

  9. Shell 编程（实例二）

    创建一个脚本,为指定硬盘创建分区 1.列出当前系统所有磁盘,让用户选择,如果选择quit则退出脚本:如果选择错误,则重新选择 2.当用户选择完成后,询问是否继续 3.抹除选择磁盘上的分区,为其创建三个 ...

  10. dev16 cxgrid 在DLL里报0地址错

    dev16 cxgrid 在DLL里Form里使用,报0地址错,在EXE里正常.c++builder 的DLL报错,delphi也报错. First chance exception at $09CE ...