码迷,mamicode.com
首页 > 其他好文 > 详细

Less 算术运算符用法

时间:2020-10-27 11:16:41      阅读:24      评论:0      收藏:0      [点我收藏+]

标签:sed   tar   用法   乘法   other   less   its   color   函数   

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

// 所有操作数被转换成相同的单位
@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 将按数字的原样进行操作,并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算:

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
不过,Less 提供的 色彩函数 更有使用价值。

calc() 特例
Released v3.0.0

为了与 CSS 保持兼容,calc() 并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

Less 算术运算符用法

标签:sed   tar   用法   乘法   other   less   its   color   函数   

原文地址:https://www.cnblogs.com/96net/p/13879737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!