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 和  运算符的区别四似乎可以做到两个不同单位直接的转换。
还有什么区别?欢迎评论区讨论
相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js