1.sass不识别不同单位之间的计算,而calc则没问题。

width: #{1rem - 2px}; /*出错*/
width: calc(1rem - 2px);

 

通常情况定制css样式,我不需要去量size,我大多数是通过计算(你无须知道size的结果,你只看效果是否满意),常常利用cacl和size的结合:

width: calc((100% - #{$mr}*#{$j})/#{$i} );

    

2.sass和calc 不能单独识别“/”,也就是不能单独识别除法,解决这种问题有两种做法:0+表达式,或者1*表达式。以line-height为例:

line-height: #{1*20/14};
/*或者*/
line-height: calc(1*20/14);

  

  

sass和css的calc运算的更多相关文章

  1. Sublime Text通过插件编译Sass为CSS及中文编译异常解决

    虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...

  2. SCSS(SASS、CSS)学习

    看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...

  3. sass编译css(转自阮一峰)

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...

  4. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  5. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  6. sass 和 css 互转网址

    sass to css:https://www.sassmeister.com/ css to sass:http://css2sass.herokuapp.com/

  7. 在Electron运行的页面使用CSS的calc导致应用卡死

    这几天发现运行在我们开发的Electron里面的网页有部分应用点击访问就会卡死,通过排除法定位到使用了CSS的calc方法,如下: <el-table height="calc(100 ...

  8. SASS对css的管理

    一.SASS简介 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般 ...

  9. CSS 中 calc() 函数用法

    CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...

随机推荐

  1. 最简单的GLSL,Shader

    Vertex Shader void main() { gl_FrontColor = gl_Color; gl_Position = ftransform(); } Fragment Shader ...

  2. adb(android debug bridge)命令

    adb(android debug bridge) adb devices --查看当前连接的模拟器/设备 adb remount --模拟器/设备重新启动,保证能用 adb push src des ...

  3. [Cubieboard] 在 Cubieboard 上安装 Node.js 和 npm

    你有两个选择可以实现在Cubieboard上安装NodeJS,下载别人已经编译完成适用于Cubieboard的NodeJS二进制包,或者自己下载源码自行在Cubieboard上进行编译. 使用编译完成 ...

  4. JS 数组Array常用方法

    参考网站: http://www.jb51.net/article/60502.htm,作者:junjie 今天在使用js切割字符串"浙江,江苏 , 天津,"...这样字符串的时候 ...

  5. 杨辉三角(Pascal Triangle)的几种C语言实现及其复杂度分析

    说明 本文给出杨辉三角的几种C语言实现,并简要分析典型方法的复杂度. 本文假定读者具备二项式定理.排列组合.求和等方面的数学知识. 一  基本概念 杨辉三角,又称贾宪三角.帕斯卡三角,是二项式系数在三 ...

  6. 删除RHSA文件方法

    DEL /F /A /Q \\?\%1RD /S /Q \\?\%1新建一个批处理文件,包含上面两行代码,然后将要删除的文件拖放进里面就OK!

  7. jQuery事件处理(四)

    看了几天,决定整理一下jQuery事件处理的整体设计思路 1.通过add方法给选中的元素注册事件处理程序(通过缓存系统将事件储存到cache,而不是绑定到元素上) a.在存储之前,会为事件处理程序增加 ...

  8. javascript 原型世界浅析

    一. 无中生有 起初,什么都没有. 造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办? 有一个声音说:不是有null嘛? 另一个声音说:可是nu ...

  9. PtH(hash传递攻击)原理探秘

    背景知识 Windows 横向渗透的两种方式 1.hash传递攻击,通过传递NTLM-Hash,登录机器,简称PtH: 2.ticket传递攻击,通过传递kerberos的ticket,登录机器,简称 ...

  10. MAC SVN 基本设置 终端命令

    extends:http://www.cnblogs.com/heiniuhaha/archive/2012/07/31/2616493.html 安装XCode后Mac OS X 系统已经内置了sv ...