浅谈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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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分页实例代码分享
2011/07/28 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
详解在React里使用"Vuex"
2018/04/02 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python os模块学习笔记
2015/06/21 Python
python安装twisted的问题解析
2018/08/21 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python小进度条显示代码
2019/03/05 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
大二学期个人自我评价
2014/01/13 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
廉洁自律承诺书
2014/03/27 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技