文章转载自  琼台博客: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的更多相关文章

  1. 如何在CSS中使用变量

    前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色 ...

  2. 我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  3. 如何在SpringBoot中使用JSP ?但强烈不推荐,果断改Themeleaf吧

    做WEB项目,一定都用过JSP这个大牌.Spring MVC里面也可以很方便的将JSP与一个View关联起来,使用还是非常方便的.当你从一个传统的Spring MVC项目转入一个Spring Boot ...

  4. 如何在latex 中插入EPS格式图片

    如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...

  5. 如何正确的使用json?如何在.Net中使用json?

    什么是json json是一种轻量级的数据交换格式,由N组键值对组成的字符串,完全独立于语言的文本格式. 为什么要使用json 在很久很久以前,调用第三方API时,我们通常是采用xml进行数据交互,但 ...

  6. [原创]如何在Parcelable中使用泛型

    [原创]如何在Parcelable中使用泛型 实体类在实现Parcelable接口时,除了要实现它的几个方法之外,还另外要定义一个静态常量CREATOR,如下例所示: public static cl ...

  7. 如何在springMVC 中对REST服务使用mockmvc 做测试

    如何在springMVC 中对REST服务使用mockmvc 做测试 博客分类: java 基础 springMVCmockMVC单元测试  spring 集成测试中对mock 的集成实在是太棒了!但 ...

  8. 如何在tomcat中如何部署java EE项目

    如何在tomcat中如何部署java EE项目 1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法.2.在tomcat安 ...

  9. 【转】我是如何在SQLServer中处理每天四亿三千万记录的

    原文转自:http://blog.jobbole.com/80395/ 首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文 ...

随机推荐

  1. Flask的消息message机制flash

    Flask的消息机制flash message是一个基于session实现的用于保存数据的集合,其特点是:使用一次就删除. 原理就是 操作成功 session['操作'] = 'msg' # 设置 s ...

  2. 【SQL查询】视图_view

    转自:http://database.e800.com.cn/articles/2009/719/1248015564465_1.html 视图是从一个或几个基本表(或视图)导出的表.它与基本表不同, ...

  3. NLTK下载语言素材中碰到的certificate verify failed (_ssl.c:749)

    NLTK是什么? NLTK是一个开源的项目,包含:Python模块,数据集和教程,用于NLP的研究和开发. NLTK由Steven Bird和Edward Loper在宾夕法尼亚大学计算机和信息科学系 ...

  4. canvas 绘制环形进度条

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  5. vc++ windows 创建桌面快捷方式

    创建桌面快捷方式 在windows软件开发中,软件安装过程中总是需要在桌面创建快捷方式,下面介绍一种创建桌面快捷方式的方法,具体代码如下: /* * 创建快捷方式 * szExePath[in]:要创 ...

  6. 剑指offer-第四章解决面试题的思路(顺序打印矩阵)

    题目:输入一个矩阵,按照从外向里的顺序依次打印出每一个数.(画图让抽象的问题形象化) 思路:打印矩阵时,把每一层当做一个圈来打印,找到打印整个矩阵的截止条件. 从上图中我可以看到一个6*6的矩阵(长宽 ...

  7. CODEVS1049 棋盘染色

    题目大意:01矩阵,1表示黑色,0表示白色,求将白色染成黑色最少的次数 使黑色成为一整个联通块. 题解: 搜索bfs 90... dfs判断连通 #include<iostream> #i ...

  8. mybatis参数

    分是不是用@Param注解的这两种情况, 1,使用@Param注解,就不用理parameterType xml文档直接用 字符串的值,若是一个类,class.property 2, 不使用@Param ...

  9. TXT

    ANDRIOD: 192.168.199.119 data50803360 zc_3floor kk4836kk kahuna  kk1626kk

  10. 低成本FPGA中实现动态相位调整

    在FPGA中,动态相位调整(DPA)主要是实现LVDS接口接收时对时钟和数据通道的相位补偿,以达到正确接收的目的.ALTERA的高端FPGA,如STRATIX(r) 系列中自带有DPA电路,但低端的F ...