浅谈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的新特性
Sep 05 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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的网址
2006/11/25 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
destoon之一键登录设置
2014/06/21 PHP
php类的定义与继承用法实例
2015/07/07 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
举例讲解Python常用模块
2019/03/08 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
2014年开学第一课活动方案
2014/03/06 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
听课评语大全
2014/04/30 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android