sass和css的calc运算
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运算的更多相关文章
- Sublime Text通过插件编译Sass为CSS及中文编译异常解决
虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...
- SCSS(SASS、CSS)学习
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...
- sass编译css(转自阮一峰)
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- 利用CSS函数calc(...)实现Web页面左右布局
前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...
- sass 和 css 互转网址
sass to css:https://www.sassmeister.com/ css to sass:http://css2sass.herokuapp.com/
- 在Electron运行的页面使用CSS的calc导致应用卡死
这几天发现运行在我们开发的Electron里面的网页有部分应用点击访问就会卡死,通过排除法定位到使用了CSS的calc方法,如下: <el-table height="calc(100 ...
- SASS对css的管理
一.SASS简介 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般 ...
- CSS 中 calc() 函数用法
CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
随机推荐
- 自己搭建CDN服务器静态内容加速-LuManager CDN使用教程
为什么要自己来搭建一个CDN服务器实现网站访问加速?一是免费CDN服务稳定性和加速效果都不怎么行:二是用国内的付费CDN服务价格贵得要死,一般的草根站长无法承受:三是最现实的问题国内的CDN要求域名B ...
- 用c语言如何在数字前自动补0
一: #include <stdio.h>int main(){ long a=3,b=4,c=15; printf("......."a,b,c);return 0; ...
- react native (一)
开始接触app方面的工作,真心塞~ 又开始了周而复始的死磕一个问题专坐一整天的节奏,关键是还没有成绩,实在无语.╮(╯▽╰)╭,还是总结一下最近心塞历程吧-- react native中文网:http ...
- 目前学习.net时间让我摸不着头脑的事情
呜呜,不太喜欢做笔记,只喜欢把自己不懂的和预习时间有麻烦的简单记下,所以这里也是能可以让我写下我们的学习点滴··· 今天学习了<1>.变量的作用域,在想是不是之前听过的局部变量和全局变量? ...
- ldap objectclass
LDAP中,一个条目必须包含一个objectClass属性,且需要赋予至少一个值.每一个值将用作一条LDAP条目进行数据存储的模板:模板中包含了一个条目必须被赋值的属性和可选的属性. obj ...
- 今日Java——Cay Horstmann访谈
这是本人在InfoQ中文站审校的文章,原文链接是:http://www.infoq.com/cn/articles/java_cay_horstmann,感觉内容很不错,分享给大家看看. 近日Info ...
- 日记整理---->2017-05-17
起始时间是2017-05-17,记录一下spring的学习过程.陌生人可以变成熟人,但熟人一旦变成陌生人,就再也回不去了. 一.测试一下init-method和depend-on huhx.xml文件 ...
- 【大数据系列】win10上安装hadoop开发环境
为了方便采用了Cygwin模拟linux环境的方法 一.安装JDK以及下载hadoop hadoop官网下载hadoop http://hadoop.apache.org/releases.html ...
- vuex - 辅助函数学习
官网文档: https://vuex.vuejs.org/zh-cn/api.html 最底部 mapState 此函数返回一个对象,生成计算属性 - 当一个组件需要获取多个状态时候,将这些状态都声 ...
- 【19道XSS题目】不服来战!(转)
[19道XSS题目]不服来战! 记得第一次接触xss这个概念是在高中,那个时候和一个好基友通过黑客X档案和黑客手册.第一次接触到了除了游戏以外的电脑知识,然后知道了,原来电脑除了玩游戏还可以搞这些,从 ...