在LESS中有一個奇怪的觀察/來自十六進制數學的結果。爲什麼會這樣？

Question

我剛開始使用LESS，迄今爲止沒有問題。但是，我遇到了一種特殊情況，其中背景被分配了顏色（＃03A9F4 - 100）。我的直覺加上我對十六進制數字的理解，從大學時期的小IT（我不是CS背景），顯然會讓我認爲結果（CSS）顏色代碼是＃03A8F4。不過，我在使用的文件中並非如此。它有＃004590作爲結果。

那麼，我沒有得到什麼呢？

更少的代碼

@div-width: 100px; 
@color: #03A9F4; 

#left{ 
    width: @div-width; 
    background-color: @color - 100; 
} 

得到的CSS代碼

#left { 
    width: 100px; 
    background-color: #004590; 
} 

Answer 1

我不正是肯定是發生幕後的數學的，但它很容易推導。

短的答案：

LESS的數字轉換爲十進制數，每個信道，以執行減法，然後重新轉換回爲十六進制。

龍回答：

如果更改100到：

background-color: #03A9F4 - #100 

輸出

background-color: #00a9f4; 

的簡寫這裏#110000，所以只有紅色頻道受到影響。

現在，當減去的數字而不是的顏色，LESS對待它有點不同。我們現在再來分解一下這個頻道。

原始顏色：#03A9F4，輸出：#004590

紅03 -> 00

藍A9 -> 45

綠色F4 -> 90

由於紅色通道沒有告訴我們很多，我們會看看其他通道。

對於藍色，A9十進制是169。減去100會讓我們留下69.什麼是十六進制中的69（十進制）？這是45。

對於綠色，F4十進制是244。減去100個葉子144，這是十六進制的90。