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. 国内CDN加速现状

    什么是CDN CDN的全称是Content Delivery Network,即内容分发网络.是位于网络层与应用层之间的网络应用,其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内 ...

  2. Elasticsearch 5.4.3 聚合分组

    第一个分析需求:计算每个tag下的商品数量 GET /ecommerce/product/_search { "aggs": { "group_by_tags" ...

  3. 目前学习.net时间让我摸不着头脑的事情

    呜呜,不太喜欢做笔记,只喜欢把自己不懂的和预习时间有麻烦的简单记下,所以这里也是能可以让我写下我们的学习点滴··· 今天学习了<1>.变量的作用域,在想是不是之前听过的局部变量和全局变量? ...

  4. Android Studio Error:Connection timed out: connect.解决方案

    遇到了这样的错误: Error:Connection timed out: connect. If you are behind an HTTP proxy, please configure the ...

  5. 【laravel5.6】laravel 自定义公共函数

    1.在 app/Helpers/ 新建一个文件 functions.php,当然这个文件位置和名称你可以自己定义,创建一些函数用于全局调用: 2.在composer.json中的autoload下增加 ...

  6. 二.jquery.datatables.js表格数据添加

    1.后台php public function addtable(){ $data = $_POST; if(M('yanfa_project')->add($data)){ $this-> ...

  7. 使用gdb调试theos tweak插件

    查看设备日志tail -f /var/log/syslog或者 Mobilesubstrate injects your dylib into the target process. Debuggin ...

  8. docker参数--restart=always的作用

    创建容器时没有添加参数  --restart=always ,导致的后果是:当 Docker 重启时,容器未能自动启动. 现在要添加该参数怎么办呢,方法有二: 1.Docker 命令修改 docker ...

  9. matlab的m程序转执行文件exe

    转换主要有两步: 第一步 设置编译器 在命令窗口输入 mbuild -setup 根据提示操作即可,.如下图我的设置 第二步 转换执行文件 命令行输入 mcc -m main   即可(输入 mcc ...

  10. iOS教程:Core Data数据持久性存储基础教程

    目录[-] 创建Core Data工程 创建数据模型 测试我们的数据模型 来看看SQL语句的真面目 自动生成的模型文件 创建一个表视图 之后看些什么? 就像我一直说的,Core Data是iOS编程, ...