在less中不能正常使用css3的calc属性的解决方法

calc是css3增加的一个自动计算长度的方法

可以进行不同单位数值之间的四则运算,比如:

.test{
  width: calc(100% - 50px);
}

在less中使用的时候会有问题

less:
.test{
  width: calc(100% - 50px)
}

less编译后:
.test{
  width: 50%;
}

因为less 的算法和css3的calc 冲突导致,改为:

.test{
  width: calc(~"100% - 50px")
}


@diss = 50px;
.test{
  width: calc(~"100% - @{diss}")
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文主要讲述页面布局样式方面涉及的知识点,更全面的对CSS相应的技术进行归类、整理、说明,没有特别详细的技术要点说...
    Joel_zh阅读 925评论 0 1
  • 1. 什么是calc()? 其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用...
    yzr_0802阅读 240评论 0 0
  • 摘自http://www.w3cplus.com/css3/how-to-use-css3-calc-functi...
    Lareina林暖暖阅读 781评论 0 0
  • 什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运...
    ddai_Q阅读 417评论 0 1
  • 一、calc()是什么 calc是英文单词calculate(计算)的缩写,是css3新增的功能,calc() 函...
    LemonnYan阅读 803评论 0 0