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

互联网   12-04 16:15:20   作者:show_code   我要评论
这篇文章主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
对于前端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:在这里提供一个工具网站,http://www.jb51.net/tools/cssyasuo.shtml,能提供各种CSS以及其他语言的格式化,往往less编译后的css文件的格式并不是我们所需要的,现在可以试一下前面我说的网址里面的净化 ,哈哈,谁用谁知道! 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
  1. Tag:CSS3   Calc   less   编译  

相关文章

  1. CSS3 Calc实现滚动条出现页面不跳动问题
    calc是css3的一个新功能,用来指定元素的长度,calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动
    2017-09-14
  2. CSS3的calc()做响应模式布局的实现方法
    这篇文章主要介绍了 CSS3的calc()做响应模式布局的实现方法,需要的朋友可以参考下
    2017-09-06
  3. CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
    这篇文章主要介绍了如何使用CSS3代码更好实现js中效果,clac Counters Tooltip等功能使得代码更为简洁明了,需要的朋友可以参考下
    2017-08-15
  4. 使用CSS3中的calc()属性来以算式表达尺寸数值
    calc()的用法十分巧妙,可以像我们在学校做数学应用题那样列式子来计算长度宽度等值,从而一定程度上实现自适应布局,下面我们就来介绍如何使用CSS3中的calc()属性来以算式表
    2016-06-06
  5. 浅析CSS中calc()的使用
    这篇文章主要介绍了浅析CSS中calc()的使用的相关资料,需要的朋友可以参考下
    2016-05-10
  6. 初探CSS3中的calc()功能
    这篇文章主要初步介绍了CSS3中的calc()功能,作者写作此文时提及了注意各浏览器的支持情况,需要的朋友可以参考下
    2015-07-14
  7. 详解CSS 3 中的 calc() 方法
    这篇文章主要介绍了详解CSS 3 的 calc() 方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-12

最新评论

利发国际手机客户端