Less 算術運算符用法


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM