快速入门
概览
变量(Variables)
混入(Mixins)
嵌套(Nesting)
运算(Operations)
转义(Escaping)
函数(Functions)
命名空间和访问符
映射(Maps)
作用域(Scope)
注释(Comments)
导入(Importing)
使用 Less.js
命令行用法
浏览器使用
Less.js选项
预加载插件
程序化使用
API
为 Less.js 做贡献
Less 函数手册
逻辑函数
字符串函数
列表函数
数学函数
类型函数
杂项函数
颜色定义函数
颜色通道函数
颜色操作函数
颜色混合函数
进阶指南
变量
父选择器
继承
合并
Mixins
CSS Guards
分离规则集
@import At-Rules
@plugin At-Rules
Maps (NEW!)
作用域
运算(Operations) - Less入门文档 - 笔下光年
网站首页
运算(Operations)
算术运算符 `+`、`-`、`*`、`/` 可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:`px` 到 `cm` 或 `rad` 到 `%` 的转换。 ```less // 所有操作数被转换成相同的单位 @conversion-1: 5cm + 10mm; // 结果是 6cm @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // example with variables @base: 5%; @filler: @base * 2; // 结果是 10% @other: @base + @filler; // 结果是 15% ``` 乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义,一个长度乘以一个长度就得到一个区域,而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作,并将为计算结果指定明确的单位类型。 ```less @base: 2cm * 3mm; // 结果是 6cm ``` 你还可以对颜色进行算术运算: ```less @color: #224488 / 2; //结果是 #112244 background-color: #112244 + #111; // 结果是 #223355 ``` 不过,Less 提供的 [色彩函数](http://www.bixiaguangnian.com/manual/less/1120.html "色彩函数") 更有使用价值。 从 4.0 开始,不会使用 `/` 运算符在括号外执行除法。 ```less @color: #222 / 2; // results in `#222 / 2`, not #111 background-color: (#FFFFFF / 16); //results is #101010 ``` 你可以改变 [数学](http://www.bixiaguangnian.com/manual/less/1108.html "数学") 设置,如果你想让它一直有效,但不推荐。 ### calc() 异常 发布于 v3.0.0 为了 CSS 兼容性,`calc()` 不计算数学表达式,但会计算嵌套函数中的变量和数学。 ```less @var: 50vh/2; width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px)) ```
上一篇:
嵌套(Nesting)
下一篇:
转义(Escaping)