less中的颜色计算溢出

问题来源：

@the-border: 1px;@base-color:#842210;#test3 {  color: @base-color * 2;  border-left: @the-border;  border-right: @the-border * 5;}

less和css中颜色都是用6位的16进制数来表示的，所以按照16进制去计算颜色似乎是理所应当的。按照16进制来运算color的值应该是#1084420，最高位溢出舍去，那么结果应该是#084420。
然而。。实际情况呢？

#test3 {  color: #ff4420;  border-left: 1px;  border-right: 5px;}

最后4位与我们预期相同，但是前两位却莫名其妙的变成了ff，第一位变成f还可以理解，毕竟8*2=16溢出了，但是第二位明明是4*2=8，为什么会莫名其妙变成f，这是个很有意思的问题，值得研究一下。

less和css中的颜色表示

• 6位16进制 如#084420
• 3位16进制 如#111
• rgb颜色 如rgb(255,255,255)
• rgba颜色 如rgba(255,255,255,0.5)

首先需要搞清楚的是以上四种颜色的转换

---

用四种方式表示同一种颜色 蓝色

//6位16进制.test{    color:#0000ff;}

//3位16进制.test{    color:#00f;}

//rgb表示.test{    color:rgb(0,0,255);}

//rgba表示.test{    color:rgba(0,0,255,1);}

从上面的例子可以看出，用6位16进制数来表示颜色的时候，其实这个并不是一个传统意义上的数，六位数组其实是以两位一组分为三组，从前到后依次表示r g b 的值，用#842210的例子来说：

#842210 中，84代表红色的值为8*16+4 =132，22代表绿色的值 2*16+4 =34，蓝色的值为 1*16 =16

那么测试一下，rgb(132,34,16)与#842210是不是一样的呢？

//less@base-color:rgb(132,34,16);#test3 {  color: @base-color ;}

用在线less转换工具将其转换为css的结果

#test3 {  color: #842210;}

那么最开始提出的那个问题就很好理解了

因为6位16进制的颜色代码是分组的，两位一组分别代表R G B的值，那么 G 的值通过乘法运算大于255之后进位到 R的值中就是不合理的。所以当计算的结果大于255之后当前颜色的区域值取FF

再来用加法验证下

//less@base-color:#880088;@test : #910088;#test3 {  color: @base-color + @test;}

用在线LESS编译器

#test3 {  color: #ff00ff;}

符合预期，那么3为16进制代表的颜色呢？
与6位的16进制原理相同，只不过用是用1个位来分别代表R G B的值罢了，这三位的计算也是分开的。

LESS在线编译器 http://tool.oschina.net/less