算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算。如果可能的話,算術運算符在加、減或比較之前會進行單位換算。計算的結果以最左側操作數的單位類型為准。如果單位換算無效或失去意義,則忽略單位。無效的單位換算例如: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))
