如何在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,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文 ...
随机推荐
- sqlserver数据库脱机时发生异常:由于无法在数据库 'SMS' 上放置锁,ALTER DATABASE 失败。请稍后再试。 ALTER DATABASE 语句失败。 (.Net SqlClient Data Provider)
sqlserver数据库脱机时发生异常,如下: =================================== 设置脱机 对于 数据库“SMS”失败. (Microsoft.SqlServe ...
- PostgreSQL 日常SQL记录
平时用的比较多的SQL语句,有时候会忘掉一点点,在这里记录一下: 1.创建表的同时,插入数据: create table test as select generate_series(1, 10000 ...
- PHP生成UTF-8编码的CSV文件用Excel打开乱码的问题
在你要输出的内容前先输出"\xEF\xBB\xBF",例如:你要输出的内容保存在$content里$content = "\xEF\xBB\xBF".$cont ...
- Django的model查询操作 与 查询性能优化
Django的model查询操作 与 查询性能优化 1 如何 在做ORM查询时 查看SQl的执行情况 (1) 最底层的 django.db.connection 在 django shell 中使用 ...
- Skynet服务器框架(八) 任务和消息调度机制
引言: 在我看来,消息和任务调度应该是skynet的核心,整个skynet框架的核心其实就是一个消息管理系统.在skynet中可以把每个功能都当做一个服务,整个skynet工程在执行过程中会创建很多个 ...
- zoj-3963 Heap Partition(贪心+二分+树状数组)
题目链接: Heap Partition Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge A sequence ...
- Date扩展 正则匹配
<script> Date.prototype.format=function(){ var d=this; //严格匹配 yyyy-mm-dd hh-mm-ss var reg1=/yy ...
- HTML服务器控件与Web服务器控件
asp.net之所以现在开发方便和快捷,关键是它有一组强大的控件库,包括web服务器控件,web用户控件,web自定义控件,html服务器控件和html控件等.这里主要整理一下html控件.html服 ...
- linux 本地账号密码无法登陆(shell可以登录),一直返回 登陆的login界面
今天我在我虚拟机测试的时候遇到了一个问题.登陆centos一直是返回login,账号和密码没错,我也换了两个用户. 1.问题描述 我正常的输入用户名和密码 错误提示截图:返回登陆界面,我重新试了另外的 ...
- php与JAVA的RSA加密互通
Java 版本RSA 进行加密解密 在网上查询了好几天,最终找到解决方案,网络上都是通过Cipher.getInstance("RSA"); 而改成Cipher.getInstan ...