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。

查看更多关于Sass颜色运算详细介绍的详细内容...