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. Unity Animation需要Inspector右键打开Debug模式,然后勾选Legacy,最后再Inspector右键打开Normal

  2. 据库分库分表(sharding)系列(一) 拆分实施策略和示例演示

    本文原文连接: http://blog.csdn.net/bluishglc/article/details/7696085 ,转载请注明出处!本文着重介绍sharding切分策略,如果你对数据库sh ...

  3. 【译】调优Apache Kafka集群

    今天带来一篇译文“调优Apache Kafka集群”,里面有一些观点并无太多新颖之处,但总结得还算详细.该文从四个不同的目标出发给出了各自不同的参数配置,值得大家一读~ 原文地址请参考:https:/ ...

  4. React Native(七)——react-native-elements

    配合React native使用的UI库:https://react-native-training.github.io/react-native-elements/ 1. 新建项目:http://w ...

  5. .net页面生命周期【转】

    .Net 页面生命周期IIS 所收到的对某 Microsoft ASP.NET 页面的每个请求都被移交给 ASP.NET HTTP 管线.HTTP 管线由一系列托管对象组成,这些对象按顺序处理该请求, ...

  6. 13条Android手机必备技巧 让玩机更有趣

    腾讯数码讯(编译:张秀梅)如果你不是一名极客或手机爱好者,那么或许对于手中的Android手机来说,肯定无法做到百分之百了解.对于这款世界上最受欢迎的操作系统来说,有许多不为大部分人所知晓的使用技巧或 ...

  7. springbatch---->springbatch的使用(三)

    这里我们对上篇博客的例子做一个修改性的测试来学习一下springbatch的一些关于chunk的一些有用的特性.我渐渐能意会到,深刻并不等于接近事实. springbatch的学习 一.chunk的s ...

  8. css笔记 - transition学习笔记(二)

    开始把7,8月份学的css整理一下 transition过渡 1. CSS transition transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果. 2. tran ...

  9. JVM工具jcmd实践

    暂时参考以下链接,后续补充自己的实践. https://www.jianshu.com/p/388e35d8a09b

  10. 【JSP】JSP指令

    JSP指令 说明: 1.JSP指令用于告知JSP 引擎转译JSP时的转化参数,他们不产生输出信息,只是在JSP的转译和编译期间起作用.  2.JSP指令必须写在规定的格式中:  <%@  [go ...