算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算,计算的结果以最左侧操作数的单位类型为准。

  1. // 所有操作数被转换成相同的单位
  2. @conversion-1: 5cm + 10mm; // 结果是 6cm
  3. @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
  4. // conversion is impossible
  5. @incompatible-units: 2 + 5px - 3cm; // 结果是 4px
  6. // example with variables
  7. @base: 5%;
  8. @filler: @base * 2; // 结果是 10%
  9. @other: @base + @filler; // 结果是 15%
  10. @color: (#224488 / 2); // 结果是 #112244
  11. background-color: #112244 + #111; // 结果是 #223355
  12. @color: #222 / 2; // results is `#222 / 2`, not #111
  13. background-color: (#FFFFFF / 16); //results is #101010

calc() 特例

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

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