在 less中不能使用css3 calc属性不能

css3 新增长度计算属性 可以根据不同单位计算宽度

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

但是当我们在less中使用这个方法的时候却出现了问题:

less中写法:
.test{
  width: calc(100% - 150px)
}

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

现这个问题的原因是less的运算方式和calc发送了冲突,要解决这个问题可以这样设置:

.test{
width: calc(~"100% - 50px");
}
  如果进行数值和变量之间的运算可以这样设置:
@diss = 50px
.test{
width: calc(~"100% - @{diss}")
}
												

calc less 下不起作用的更多相关文章

  1. linux下mnt目录作用

    linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...

  2. 绝对定位下margin的作用

    以前一直对绝对定位下的margin作用很模糊,今天细看一下 不使用top,left,margin等 <!DOCTYPE html> <html lang="en" ...

  3. 用图片作为label,for属性IE下不起作用

    IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用. 例如: <input type="c ...

  4. 转 /etc/ld.so.conf.d/目录下文件的作用

    在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法:第一种,通过ldconfig命令    ldconfig命令的用途, 主要是在默认搜寻目录(/l ...

  5. jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  6. xmlHttpRequest在Firefox下不起作用?

    描述: XMLHttpRequest 在IE下正常,在Firefox下不起作用. 原因: XMLHttpRequest 对象的 onreadystatechange 不会在Firefox下执行, 解放 ...

  7. /etc/ld.so.conf.d/目录下文件的作用

    在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法: 第一种,通过ldconfig命令     ldconfig命令的用途, 主要是在默认搜寻目录( ...

  8. 表格树 tableTree 高度 默认maxHeight,在isFold下不起作用,后期改值 vue-table-with-tree-grid

    表格树 tableTree 高度 默认maxHeight,在isFold下不起作用,后期改值  vue-table-with-tree-grid mounted () { this.$refs.tab ...

  9. system32下 exe文件作用

    system32下EXE文件的作用说明 A accwiz.exe 辅助功能向导 ahui.exe 应用程序兼容用户界面 alg.exe 为 Internet 连接共享和 Internet 连接防火墙提 ...

随机推荐

  1. Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

    1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...

  2. kubernetes的Service是什么?

    service到底是什么? k8s的service定义了一个服务的访问入口地址,前端的应用通过这个入口地址访问其背后的一组由pod副本组成的集群实例.来自外部的访问请求被负载均衡到后端的各个容器应用上 ...

  3. Linux-监控与安全运维之zabbix

    zabbix: Zabbix是一个开源分布式监控平台,包含诸多监控功能,用于构建一个符合企业级的监控解决方案.软件由开源社区提供开发和维护,遵循GPL协议,可以自由传播和使用,但开发团队提供收费的技术 ...

  4. Java去除ArrayList集合中重复字符串的案例

    ArrayList去除集合中的字符串重复值 分析: A:创建集合对象 B:添加多个字符串元素 C:创建新集合 D:遍历旧集合,获取得到每一个元素 E:拿着个元素到新集合去找,看有没有 有:不进去 没有 ...

  5. 可以用 Python 编程语言做哪些神奇好玩的事情?除了生孩子不能,其他全都行!

    坦克大战 源自于一个用Python写各种小游戏的github合集,star数1k.除了坦克大战外,还包含滑雪者.皮卡丘GOGO.贪吃蛇.推箱子.拼图等游戏. 图片转铅笔画 帮助你快速生成属于自己的铅笔 ...

  6. zookeeper笔记(一)

    title: zookeeper笔记(一) zookeeper 安装简记 解压文件 $ tar -zxvf zookeeper-3.4.10.tar.gz -C 安装目录 创建软连接(进入安装目录) ...

  7. JDK12的五大重要新特性

    文章目录 JDK12的五大重要新特性 引入JVM常量API 扩展了switch语句 支持Unicode 11.0 为日本Reiwa Era提供了方形字符支持 NumberFormat增加了对以紧凑格式 ...

  8. IDEA 之 ERROR:端口被占用

    问题描述:在IDEA启动javaweb项目中未能成功启动,ERROR:端口已经被使用.但是tomcat并没有被启动. 解决方法: 打开CMD 输入以下命令 netstat -aon | finfstr ...

  9. java之 惰性初始化

    class Soap { private String s; Soap(){ System.out.println("Soap()"); s="Constructed&q ...

  10. 使用react脚手架create-react-app创建react应用

    Create React App是一种官方支持的创建单页React应用程序的方法.它提供了一个没有配置的现代构建设置. 一.全局安装脚手架: npm install -g create-react-a ...