less 里面的calc 和 运算符有什么区别 ?

首先看下less 官网介绍的运算符

运算(Operations)

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。

// 数字转换为相同的单位

@convert: 5cm + 10mm; // returns 6cm @conversion-2: 2 - 3cm - 5mm; //

result is -1.5cm

// conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是

4px

// 带变量的示例

@base: 5%;

@filler: @base * 2; // returns 10%

@other: @base + @filler; // 结果是 15%

乘法和除法不会转换数字。在大多数情况下这是没有意义的,一个长度乘以一个长度就得到一个区域,而 CSS 是不支持指定区域的。Less 会按照数字的原样进行操作,并将明确声明的单位类型分配给结果。

@base: 2cm * 3mm; // 结果是6cm

你还可以对颜色进行算术运算:

@color: (#224488 / 2); // 结果是#112244

background-color: #112244 + #111; // 结果是#223355

但是,你可能会发现 Less 的 色彩函数 更有用。

从 4.0 开始,不会使用 / 运算符在括号外执行除法。

@color: #222 / 2; // 结果为 #222 / 2,而不是 #111

background-color: (#ffffff / 16); //结果是#101010

如果你希望始终起作用,可以更改 Math 设置,但不建议这样做。

再看看calc 的介绍

为了与 CSS 兼容,calc() 不会计算 Math 表达式,但会计算变量和嵌套函数中的 Math 表达式。

使用坑点:

1、没写空格

c 复制代码
/*错误写法*/
div{
      width: calc(100%-50px);
}
/*正确写法*/
div{
      width: calc(100% - 50px);
}

这里错误写法中-两边没加空格,导致width不生效。但并不是所有运算符间都需要加空格,只有 + 和 - 需要加空格,因为运算允许负数的出现

2、没写单位

c 复制代码
/*错误写法*/
div{
      width: calc(0 + 100px);
}
/*正确写法*/
div{
      width: calc(0px + 100px);
}

3、单位不同时会被转换成相同单位

c 复制代码
.box {
  width: calc("100% - 50px") 转成了50%
}
使用转义
.box {
  width: calc(~"100% - 50px")
}


从上面的使用上来看,calc 和  运算符的区别四似乎可以做到两个不同单位直接的转换。
还有什么区别?欢迎评论区讨论
相关推荐
熊的猫26 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596932 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书