如何在Less中使用使用calc
文章转载自 琼台博客:http://www.qttc.net/201409448.html
Less的好处不用说大家都知道,确实让写CSS的人不在痛苦了,最近我在Less里加入calc时确发现了有点问题,我在Less中这么写:
1
2
3
|
div { width : calc( 100% - 30px ); } |
结果Less把这个当成运算式去执行了,结果给我解析成这样:
1
2
3
|
div { width : calc( 70% ); } |
于是,我把Less改写成这样:
1
2
3
|
div { width : calc(~ "100% - 30px" ); } |
解析结果正常:
1
2
3
|
div { width : calc( 100% - 30px ); } |
然而,把30px替换为一个变量,怎么写呢?
1
2
3
4
|
div { @diff : 30px ; width : calc(~ "100% - " + @diff); } |
这么写Webstorm没有报错,但grunt-less报错了:
1
2
3
4
5
6
7
8
9
|
C:\Users\zhong\WebstormProjects\ test >grunt less Running "less:development" ( less ) task >> ParseError: Unrecognised input in style. less on line 4, column 2: >> 3 @ diff : 30px; >> 4 width : calc(~ "100% - " + @ diff ); >> 5 } Warning: Error compiling style. less Use --force to continue . Aborted due to warnings. |
于是这么写:
1
2
3
4
|
div { @diff : 30px ; width : calc(~ "100% - " @diff); } |
顺利编译过去,但Webstorm却老是提示语法错误,虽然也能编译但看着文件有一个错误提示心里老感觉不爽,找半天也没发现Webstorm如何调试语法提示错误设置
于是,改成如下写法:
1
2
3
4
|
div { @diff : 30px ; width : calc(~ "100% - @{diff}" ); } |
这种写法又能编译,Webstorm里又不报错,所以我比较喜欢用这种写法。
如何在Less中使用使用calc的更多相关文章
- 如何在CSS中使用变量
前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色 ...
- 我是如何在SQLServer中处理每天四亿三千万记录的
首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...
- 如何在SpringBoot中使用JSP ?但强烈不推荐,果断改Themeleaf吧
做WEB项目,一定都用过JSP这个大牌.Spring MVC里面也可以很方便的将JSP与一个View关联起来,使用还是非常方便的.当你从一个传统的Spring MVC项目转入一个Spring Boot ...
- 如何在latex 中插入EPS格式图片
如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...
- 如何正确的使用json?如何在.Net中使用json?
什么是json json是一种轻量级的数据交换格式,由N组键值对组成的字符串,完全独立于语言的文本格式. 为什么要使用json 在很久很久以前,调用第三方API时,我们通常是采用xml进行数据交互,但 ...
- [原创]如何在Parcelable中使用泛型
[原创]如何在Parcelable中使用泛型 实体类在实现Parcelable接口时,除了要实现它的几个方法之外,还另外要定义一个静态常量CREATOR,如下例所示: public static cl ...
- 如何在springMVC 中对REST服务使用mockmvc 做测试
如何在springMVC 中对REST服务使用mockmvc 做测试 博客分类: java 基础 springMVCmockMVC单元测试 spring 集成测试中对mock 的集成实在是太棒了!但 ...
- 如何在tomcat中如何部署java EE项目
如何在tomcat中如何部署java EE项目 1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法.2.在tomcat安 ...
- 【转】我是如何在SQLServer中处理每天四亿三千万记录的
原文转自:http://blog.jobbole.com/80395/ 首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文 ...
随机推荐
- Flask的消息message机制flash
Flask的消息机制flash message是一个基于session实现的用于保存数据的集合,其特点是:使用一次就删除. 原理就是 操作成功 session['操作'] = 'msg' # 设置 s ...
- 【SQL查询】视图_view
转自:http://database.e800.com.cn/articles/2009/719/1248015564465_1.html 视图是从一个或几个基本表(或视图)导出的表.它与基本表不同, ...
- NLTK下载语言素材中碰到的certificate verify failed (_ssl.c:749)
NLTK是什么? NLTK是一个开源的项目,包含:Python模块,数据集和教程,用于NLP的研究和开发. NLTK由Steven Bird和Edward Loper在宾夕法尼亚大学计算机和信息科学系 ...
- canvas 绘制环形进度条
结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- vc++ windows 创建桌面快捷方式
创建桌面快捷方式 在windows软件开发中,软件安装过程中总是需要在桌面创建快捷方式,下面介绍一种创建桌面快捷方式的方法,具体代码如下: /* * 创建快捷方式 * szExePath[in]:要创 ...
- 剑指offer-第四章解决面试题的思路(顺序打印矩阵)
题目:输入一个矩阵,按照从外向里的顺序依次打印出每一个数.(画图让抽象的问题形象化) 思路:打印矩阵时,把每一层当做一个圈来打印,找到打印整个矩阵的截止条件. 从上图中我可以看到一个6*6的矩阵(长宽 ...
- CODEVS1049 棋盘染色
题目大意:01矩阵,1表示黑色,0表示白色,求将白色染成黑色最少的次数 使黑色成为一整个联通块. 题解: 搜索bfs 90... dfs判断连通 #include<iostream> #i ...
- mybatis参数
分是不是用@Param注解的这两种情况, 1,使用@Param注解,就不用理parameterType xml文档直接用 字符串的值,若是一个类,class.property 2, 不使用@Param ...
- TXT
ANDRIOD: 192.168.199.119 data50803360 zc_3floor kk4836kk kahuna kk1626kk
- 低成本FPGA中实现动态相位调整
在FPGA中,动态相位调整(DPA)主要是实现LVDS接口接收时对时钟和数据通道的相位补偿,以达到正确接收的目的.ALTERA的高端FPGA,如STRATIX(r) 系列中自带有DPA电路,但低端的F ...