Less中的颜色计算溢出

最新推荐文章于 2024-01-17 23:21:52 发布

HUSTNEO

最新推荐文章于 2024-01-17 23:21:52 发布

阅读量2.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013190268/article/details/49202767

版权

4 篇文章 0 订阅

订阅专栏

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，这是个很有意思的问题，值得研究一下。

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

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

//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的值罢了，这三位的计算也是分开的。

关注

专栏目录