Sass颜色运算详细介绍

颜色值是Sass中的一种特殊的数据类型，我们在之前“Sass数据类型”这一节已经详细介绍过了。

在Sass中，我们也是可以对颜色值进行运算的。颜色运算支持加、减、乘、除，并且是分段进行计算的。也就是说，红、绿、蓝这3个部分的颜色是单独进行计算的。

举例1：

div
{
    color: (#010203 + #040506);
}

编译出来的CSS代码如下：

div
{
    color: #050709;
}

分析：

由于颜色运算是分段的，其中红、绿、蓝3个部分单独进行计算，所以这个例子的计算方式为：

01 + 04=05，
02 + 05=07，
03 + 06=09

最后，将这3段计算后的结果合并得到最终颜色值：#050709。

举例2：

div
{
    color: (#010203 * 2);
}

编译出来的CSS代码如下：

div
{
    color: #020406;
}

分析：

由于颜色运算是分段的，其中红、绿、蓝3个部分单独进行计算，所以这个例子的计算方式为：

01 * 2=02，
02 * 2=04，
03 * 2=06

最后，将这3段计算后的结果合并得到最终颜色值：#020406。

此外，如果颜色值不是十六进制颜色值（如#010203），而是RGB或者HSL的话，我们都是将RGB或HSL先转换为十六进制颜色值，然后再进行加、减、乘、除运算的。

div
{
    color:(rgb(17,34,51) *2);
}

编译出来的CSS代码如下：

div 
{
    color: #224466;
}

分析：

rgb(17,34,51转化为十六进制颜色值为“#112233”，然后进行乘法运算，最后得到最终颜色值：#224466。