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. Vim 的 Python 编辑器详细配置过程 (Based on Ubuntu 12.04 LTS)

    为什么要用vim编辑py文件? 因为在Linux命令行中,缺少图形界面的IDE,vim是最佳的文本编辑器,而为了更好的编辑py文本,所以配置vim. 1. 安装完整版vim vi和vim的区别? 在L ...

  2. ScaleType属性

    FIT_CENTER 把原图按照比例放大缩小到ImageView的高度,显示在ImageView的center(中部/居中显示). 1   2 CENTER_CROP 会拉伸图片以原图填满ImageV ...

  3. java十年技术栈[总结复习用]

    以下摘自http://www.tvtv223.com/so/8/default/8.html#36-数据库的分库分表mycat java技术栈 参考了众多资料,这里就不再详细列举了,可以自行去搜索 1 ...

  4. Spring系列之访问数据库

    一.概述 Spring的数据访问层是以统一的数据访问异常层体系为核心,结合JDBC API的最佳实践和统一集成各种ORM方案,完成Java平台的数据访问. 二.JDBC API的最佳实践 Spring ...

  5. php基础设计模式 注册树模式、工厂模式、单列模式

    废话不多说了,先给大家介绍注册树模式然后介绍工厂模式最后给大家介绍单列模式,本文写的很详细,一起来学习吧. php注册树模式 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里 ...

  6. luanet分布式lua框架

    luanet最初只是一个网络框架,它简单的封装了一些网络相关接口然后暴露到lua中,让lua可以构建简单的网络应用. 随着我的手游服务器的开发,我发现在C语言中要实现一个简洁易用的RPC调用接口并不容 ...

  7. WP8.1学习系列(第八章)——透视Pivot设计指南

    在本文中 描述 应做事项和禁止事项 其他使用指南 相关主题 重要的 API Pivot class (XAML) PivotItem class (XAML) Windows Phone 应用:具有透 ...

  8. eagle学习汇总

    一.原理图编辑器 1. 编辑->全局属性->可以设置全局变量,选择“文本框”,以‘>’开头代表引用全局属性的值. 2. 绘制->Frame->可绘制原理图边框,一般选择“ ...

  9. HTML5 css3 阴影效果

    阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website. -webkit-box-shadow: 1 ...

  10. jQuery属性操作(二)

    挂载到$上的几个属性操作方法分析,发现属性操作用到了sizzle封装的方法 attr: function( elem, name, value ) {        var hooks, ret,   ...