浅谈css3中calc在less编译时被计算的解决办法


Posted in HTML / CSS onDecember 04, 2017

对于前端er来说,Less或Sass已经是一项必备的基本技能,有了这个利器,可以省下前端开发者的很多编码时间,让你写CSS如行云流水一般,然后最近我在Less里加入calc时确发现了有点问题,我在Less中这么写:

div {width : calc(100% - 30px);}

结果Less把这个当成运算式去执行了,结果给我解析成这样:

div {width: calc(70%);}

当时我就郁闷了,怎么会产生这样的现象呢?后来各种查,是由于less的计算方式跟calc方法有重叠,两者在一起有冲突,于是,我在Less中把calc的写法改写成下面这样:

div {width : calc(~"100% - 30px");}

OK,解析结果正常: 

div {width: calc(100% - 30px);}

然而,把30px替换为一个变量,怎么写呢?

div {

@diff : 30px;

width : calc(~"100% - " + @diff);

}

这么写Webstorm没有报错,但grunt-less报错了:

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.

于是这么写:

div {

@diff : 30px;

width : calc(~"100% - " @diff);

}

顺利编译过去,但Webstorm却老是提示语法错误,虽然也能编译但看着文件有一个错误提示心里老

感觉不爽,找半天也没发现Webstorm如何调试语法提示错误设置

于是,改成如下写法:

div {

@diff : 30px;

width : calc(~"100% - @{diff}");

}

这种写法又能编译,Webstorm里又不报错,所以我比较喜欢用这种写法,如此,便不会再有任何问题了。

PS:在这里提供一个工具网站,https://3water.com/tools/cssyasuo.shtml,能提供各种CSS以及其他语言的格式化,往往less编译后的css文件的格式并不是我们所需要的,现在可以试一下前面我说的网址里面的净化 ,哈哈,谁用谁知道!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 #HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 #HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 #HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 #HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 #HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 #HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 #HTML / CSS
You might like
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
python cs架构实现简单文件传输
2020/03/20 Python
python assert的用处示例详解
2019/04/01 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
中职招生先进个人材料
2014/08/31 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
领导班子整改方案
2014/10/25 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
MySQL常见优化方案汇总
2022/01/18 MySQL